重读 Gulp

Gulp 简介

Gulp 对现在的前端而言，是一个稍微老旧的工具了，但是，为了复习以前学过的内容，还是把它翻出来，放在自己的博客中。说不定哪天又用到了呢。

需要说明的是，这里使用的 Gulp 版本是 3.9.1。

认识 Gulp

Gulp 是基于 Nodejs 的任务运行器，主要作用就是对代码进行构建打包。说白了，就是将源代码通过 Gulp 中流的操作，生成目标代码。

Gulp 借鉴了 Unix 操作系统中的管道思想，前一级的输出作为后一级的输入，所有的操作都是通过 Nodejs 流的形式来进行操作。这种思想使操作变得简单，为后续的任务编写打下基础。

Gulp 资源

学习任何一门技术之前，首先要知道它的官网，Gulp 也不例外。在这里把中文官网和英文官网一并放在下面，当然，最好是看英文官网，所以把英文官网放在了最上面。

• 英文官网
• 中文官网

当然，该项目的 GitHub 地址也是需要知道在哪个地方的，这样方便查看源码。闲着没事的时候，也可以看看源码实现，提高一下自己的技术水平。

• GitHub 地址

在网上搜集 Gulp 相关教程的时候，发现了一个很好的网站，上面有一系列关于 Gulp 的文章。这个网站中讲解 Gulp 还是比较详细的。可以按照该网站中给出的教程，逐个学习。

• Gulp教程

Gulp 入门

安装 Gulp

Gulp 的安装依赖 Nodejs。在安装 Gulp 之前，一定要确保已经安装了 Nodejs。关于 Nodejs 的安装过程，可以参照 安装 Nodejs。

全局安装 :

如果需要全局使用 Gulp，可以使用全局安装。

$ npm install -g gulp-cli

全局安装，可以在终端中使用下面的命令查看当前的 Gulp 版本 :

$ gulp -v
[16:10:17] CLI version 1.4.0

通过全局安装的方式，在存在 gulpfile.js 的地方，都可以使用 gulp 命令来执行任务。

# 如 gulpfile.js 中存在一个 default 的命令，就可以通过下面的方式执行
$ gulp

项目依赖安装 :

这个时候安装的 Gulp 是在 package.json 中的 devDependencies 节点下的，因为 Gulp 是项目开发时使用的模块，不是生产时使用的模块。

在安装的时候，可以选择使用 npm 的方式安装，这种安装方式最常见，但是一般安装速度比较慢。

# 使用 npm 安装
$ npm install --save-dev gulp

当然，也可以选择使用 yarn 的方式进行安装，这种方式安装比较快速，但是需要安装 yarn。

# 使用 yarn 安装
$ yarn add gulp -D

通过项目依赖来安装的 Gulp，必须在项目的根目录下执行，且根目录中必须存在 gulpfile.js，执行 Gulp 任务的时候，需要使用 Gulp 工具在当前项目目录中的相对路径来调用。

# 如 gulpfile.js 中存在一个 default 的命令，就可以通过下面的方式执行
$ ./node_modules/.bin/gulp

一般情况下，不推荐使用全局的方式来安装 Gulp。推荐使用项目依赖来安装，然后再结合 package.json 来使用。

Gulp 的简单使用

首先要通过安装项目依赖的方式来安装 Gulp :

$ yarn add gulp -D

由于通过 Gulp 来执行任务，首先需要有一个 gulpfile.js 文件，因此，在执行任务之前，要创建 gulpfile.js 文件。文件创建完成之后，创建两个任务。

// 在文件中一定要引入的模块
var gulp = require('gulp');

// 将你的默认的任务代码放在这
gulp.task('default', function() {
  console.log('default task ...');
});

// 自定义名称的任务
gulp.task('demo',function(){
  console.log('demo task ...');
});

任务创建完成之后，下面就是通过 Gulp 来执行任务了。执行任务之前，首先明白不同的任务。对于 Gulp 而言，本身存在一个名字为 default 的任务，这个任务名在 Gulp 中已经内置了。除了 default 之外，其余所有的任务都是自定定义的任务，也就是说，除了 default 之外，任务名可以自定义。

在上面的代码中定义了两个任务，其中 default 是默认任务，执行的时候比较方便，在 gulp 命令之后，不需要跟任何参数。

$ ./node_modules/.bin/gulp

[14:50:11] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:11] Starting 'default'...
default task ...
[14:50:11] Finished 'default' after 187 μs

但是，自定义的任务执行的时候，要在 Gulp 命令后跟上一个参数，这个参数是任务的名字。

$ ./node_modules/.bin/gulp demo

[14:50:16] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:16] Starting 'demo'...
demo task ...
[14:50:16] Finished 'demo' after 1.35 ms

输出的日志中，会把任务开始的时间以及结束的时间打印出来，开始时间和结束时间之间就是任务执行的过程。从某方面来讲，这种输出的日志类似 HTML 中的标签，存在开始标签和结束标签。当然，这只是一种类比。

需要补充的一点 : 如果需要使用 babel 来转换 js 文件，为了能使 babel 的配置文件能够正常读取，一般会把 gulpfile.js 重新命名为 gulpfile.babel.js，这样就可以在 gulpfile.babel.js 中使用 ES6 的最新语法了。

Gulp API

Gulp 的 API 设计也比较简单，总共只有四个 gulp.src gulp.dest gulp.task gulp.watch。很少的 API，极大程度上缩减了记忆的成本，但是需要自己配置的内容相对而言就多了。

gulp.task

gulp.task 主要是用来定义任务的。

/**
 * 作用 : 定义一个任务
 * @param {String} name 任务的名字，不要在任务名字中出现空格
 * @param {Array} deps 可选参数，任务列表的数组，是当前任务执行前的依赖任务，数组的元素是任务名
 * @param {Function} fn 定义任务所要执行的一些操作
 */
gulp.task(name[, deps], fn)

对于第三个参数，需要说明一下。第三个参数可以接收一个回调函数，也可以返回一个 stream。

当接收一个回调函数的时候，一定要注意回调函数中的参数。

gulp.task('mytask', function (cb) {
  if (true) {
    cb(null); // 当回调函数的参数是 null 的时候，说明不会存在错误
  } else {
    cb('存在错误'); // 当回调函数的参数不是 null 的时候，这个时候就是产生了错误
  }
});

返回一个 stream 流的时候，一般是通过 gulp 的 API 来获取的。

gulp.task('mytask', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(gulp.dest('build'));
  return stream;
});

gulp.src

gulp.src 主要作用就是用来读取文件或者文件夹中的数据。

/**
 * 作用 : 读取数据并返回一个流
 * @param {String | Array} globs 参数是文件或者文件夹，支持相对路径
 * @param {Object} options 可选参数，任务列表的数组，是当前任务执行前的依赖任务，数组的元素是任务名
 */
gulp.src(globs[, options])

其中 globs 的参数是 node-glob 模块 的参数。详细参数可以到官网查看这个模块，这里只说明几个特殊的匹配。

1. ** 用于匹配文件夹，表示 0 个或者多个层级的目录
2. * 用于匹配文件名，表示 0 个或者多个字符
3. ! 排除符合规则的文件，! 一定要放在匹配规则之前

如果要匹配 src 目录下的所有 .js 文件，且排除 src 目录下的所有以下划线开头的 .js 文件，就可以写成下面的形式 :

gulp.src(['./src/**/*.js', '!./src/**/_*.js'])

使用 options.base 可以修改文件的目标路径。在没有指定该参数的时候，目标路径是第一个匹配符之前的路径。

gulp.task('default', function () {
  // 这个时候会把 ./src/one 替换成 ./build，也可以理解成此时的 options.base 为 ./src/one
  // 最终 .js 文件所在的路径就是 ./build/*.js
  return gulp.src(['./src/one/*.js'])
    .pipe(gulp.dest('./build'));
});

如果指定了 options.base 参数，那么最终文件所在的路径就会发生变化。

gulp.task('default', function () {
  // 最终 .js 会被拷贝到 ./build/one/*.js 中
  return gulp.src(['./src/one/*.js'], {
      base: 'src'
    })
    .pipe(gulp.dest('./build'));
});

gulp.dest

gulp.dest 用来指定文件最终被写入的路径。

/**
 * 作用 : 读取数据并返回一个流
 * @param {String} path 文件的目标路径，这个只能指定文件夹，不能指定文件
 * @param {Object} options 可选参数，一般很少使用，这里不再说明
 */
gulp.dest(path[, options])

gulp.dest 的简单使用实例。

gulp.task('default', function () {
  return gulp.src('./src*.js').pipe(gulp.dest('./build'));
});

gulp.watch

gulp.watch 用于监视文件变化，发现文件变化，则触发某个操作。

/**
 * 作用 : 监视文件变化，发现文件变化，则触发某个操作
 * @param {String | Array} glob 一般是匹配文件
 * @param {Object} opts 可选参数，一般很少使用，这里不再说明
 * @param {Array} tasks 数组的参数是任务的名称，表示文件变化触发一个或多个任务
 */
gulp.watch(glob [, opts], tasks)

咱们现在看一个简单的例子，.js 文件发生变化的时候，执行任务 one。

gulp.task('one', function () {
  console.log('one...');
});

gulp.task('default', function () {
  console.log('default ...');
});

gulp.watch('src/**/*.js', ['one']);

现在有一个需求，当某个 .js 文件发生变化的时候，需要获取是哪个文件发生了变化，那么就需要增加监听。

gulp.task('one', function () {
  console.log('one...');
});

gulp.task('default', function () {
  console.log('default ...');
});

gulp.watch('src/**/*.js', ['one']).on('change', function(event) {
  // event.path 表示文件的名称
  // event.type 指的是发生的变化
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

使用技巧

Gulp 的进一步使用，可以参照中文官网中的 gulp 技巧集。