重读 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 技巧集。