gulp.js 的使用

什么是 gulp.js

gulp.js - 基于流的自动化构建工具。gulp.js 的 API 简单，学习成本低；利用 Node.js 流，速度快。使用 gulp.js 可以大大提高开发效率。

Gulp 的 Stream

Gulp 是一个利用 Stream（数据流）的构建系统，下面，我们通过一张图来理解 Gulp 的 Stream：所谓 Stream，我们可以理解为一条生成线，我们拿来一些原料，通过许多到工序加工之后生产出一件成品。
Stream 中有一个重要操作叫做 pipe （即管道），流从上一个管道流下来，进入下一个管道，而每个管道都进行了响应的处理，最后流出。
如图，需要处理的文件从最顶部流入，一次经过下面三个管道处理，最后输出处理好的文件。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');

// 将 .styl 文件编译成 .css 文件
gulp.task('styles', function () {
  return gulp
    .src('./src/client/styles/**/*.styl') // 输出符合条件的文件 —— 原料
    .pipe(stylus()) // 将 .styl 文件编译成 .css 文件 —— 第一道工序
    .pipe(plumber()) //阻止 gulp 插件发生错误导致进程退出并输出错误日志 —— 第二道工序
    .pipe($.autoprefixer({browsers: ['> 0.1%', 'not ie < 9']})) // 根据不同浏览器增加 CSS 前缀  —— 第三道工序
    .pipe(gulp.dest( './src/client/_tmp/styles/')); // 将处理好的文件输出到指定位置（若没有指定文件夹将会自动创建） —— 成品
});

Gulp 的 Task

理解了 Gulp 的 Stream 之后我们再来看一下 Gulp 的 Task。下面，我们还是先通过一张图来整体了解一下 Gulp 的 Task。
每个 Task 包含了很多的 pipe，比如我们要生成一辆汽车，每个 Task 其实是其中的一个部件，而 pipe 则是每个部件的一道工序。
把上面的代码改造一下，给 styles 这个 task 增加一个依赖 task（clean-styles），目的是在生成新的编辑后的 css 之前删除原有的文件。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
var del = require('del');

// 清空文件夹中的 .css 文件
gulp.task('clean-styles', function () {
  del.sync( './src/client/_tmp/*.css');
});
// 将 .styl 文件编译成 .css 文件
gulp.task('styles', ['clean-styles'], function () {
  return gulp
    .src('./src/client/styles/**/*.styl')
    .pipe(stylus())
    .pipe(plumber())
    .pipe($.autoprefixer({browsers: ['> 0.1%', 'not ie < 9']}))
    .pipe(gulp.dest( './src/client/_tmp/styles/'));
});

var gulp = require('gulp');
gulp.task('task1', function () {
  console.log('task1');
});
gulp.task('task2', function () {
  setTimeout(function () {
    console.log('task2');
  }, 1000);
});
gulp.task('task3', function () {
  console.log('task3');
});
gulp.task('task', ['task1', 'task2', 'task3'], function () {
  console.log('task');
});

通过下图我们可以发现，task 并没有等待 task2 执行完毕后再执行。

没有回调函数

那么如何让 Task 等待所依赖的 Task 执行完成之后再执行呢？方法有以下三种：

1. 在完成时返回一个回调函数；

var gulp = require('gulp');
gulp.task('task1', function () {
  console.log('task1');
});
gulp.task('task2', function (cb) {
  setTimeout(function () {
    console.log('task2');
    cb();
  }, 1000);
});
gulp.task('task3', function () {
  console.log('task3');
});
gulp.task('task', ['task1', 'task2', 'task3'], function () {
  console.log('task');
});

如下图显示，task 是等待 task2 执行完毕以后再执行

添加回调函数

2. 在完成时返回一个 promise

var gulp = require('gulp');
var Q = require('q');

gulp.task('task1', function () {
  console.log('task1');
});
gulp.task('task2', function () {
  var deferred = Q.defer();
  setTimeout(function () {
    console.log('task2');
    deferred.resolve();
  }, 1000);
  return deferred.promise;
});
gulp.task('task3', function () {
  console.log('task3');
});
gulp.task('task', ['task1', 'task2', 'task3'], function () {
  console.log('task');
});

3. 在完成时返回一个 stream

gulp.task('styles', ['clean-styles'], function () {
  return gulp // 这里实际上就是返回了一个 stream
    .src('./src/client/styles/**/*.styl')
    .pipe(stylus())
    .pipe(plumber())
    .pipe($.autoprefixer({browsers: ['> 0.1%', 'not ie < 9']}))
    .pipe(gulp.dest( './src/client/_tmp/styles/'));
});

gulp 快速上手

1. 在已经安装了 node 的环境下，全局安装 gulp：
   $ npm install --g gulp
2. 为项目安装开发依赖（devDependencies）：
   $ npm install --save-dev gulp
3. 在项目根目录下创建 gulpfile.js 的文件作为 gulp 的配置文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 默认执行的任务代码
});

4.运行 gulp
$ gulp taskName
注：如果没有指定任务名，则会执行任务名为 default 的默认任务。

gulp API

gulp.src(globs[, options])：用来获取需要操作的文件

• globs：文件匹配模式，用来匹配需要操作的文件
  类型：String 或 Array
  语法：详见 node-glob ，也可以直接写文件的路径

• options：通过 glob-stream 传递给 node-glob 的参数，可选参数
  类型：Object
  语法：{ key: value }
  参数：除了 node-glob 和 glob-stream 所支持的参数外，gulp 增加了一些额外的选项参数

gulp.src('./src/client/styles/**/*.styl', {
  buffer: true, // Boolean 类型（默认值：true，设置为 false，将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式）
  read: true, // Boolean 类型（默认值：true，设置为 false，file.contents 会返回 null，也就是并不会去读取文件）
  base: '' // String 类型
})

gulp.task('styles1', ['clean-styles'], function () {
  return gulp
    .src('./src/client/styles/**/*.styl')
    .pipe($.stylus())
    .pipe(gulp.dest('./src/client/build/'));
});
gulp.task('styles2', ['clean-styles'], function () {
  return gulp
    .src('./src/client/styles/**/*.styl', {base: './src/client'})
    .pipe($.stylus())
    .pipe(gulp.dest('./src/client/build/'));
});

通过下面两张图片对比我们可以发现，如果未设置 base，实际 base 会被默认设置为 ./src/client/styles

未设置 base 设置 {base: './src/client'}

gulp.dest(path[, options])：用来写文件，可以写入多个文件夹

• path：文件将被写入的路径，也可以传入一个函数，在函数中返回相应路径（如果gulp.src() 中有设置 base 字段，则会替换 base 的路径）
  类型：String 或 Function
  注：我们在这里指定的路径是生成被写入文件的目录而不是文件名字，文件名是由导出的文件流决定的
• options：可选参数
  类型：Object
  语法：{ key: value }
  参数：

gulp.dest('./src/client/build', {
  cwd: process.cwd(), // String 类型 （默认值： process.cwd()），输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效
  mode: 0777 // String 类型（默认值： 0777），八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。
})

gulp.task(name[, deps], fn)：详见本文开头 Gulp 的 Task

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])：监听，when 文件发生改动 do something

1. gulp.watch(glob[, opts], tasks)
   • glob：用来指定所要监听的文件
     类型： String or Array
     语法：同 gulp.src()
   • opts：传给 gaze 的参数，可选参数
     类型： Object
   • tasks：用来指定在所监听的文件变化后要执行的任务名称
     类型： Array
2. gulp.watch(glob [, opts, cb])
   • glob 和 opts 同 gulp.watch(glob[, opts], tasks) 中 glob 和 opts
   • cb(event)：每次变动需要执行的回调函数（该回调函数会传入一个 event，包含监控到的变动信息）
     类型： Function
     参数：

gulp.watch('./src/client/styles/**/*.styl', function(event) {
  console.log(event.path); // String 类型，发生的改变的文件的路径
  console.log(event.type); // String 类型，发生的改变的类型：added, changed 或者 deleted
});