什么是 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 执行完成之后再执行呢？方法有以下三种：
- 在完成时返回一个回调函数；
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 执行完毕以后再执行
- 在完成时返回一个
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');
});
- 在完成时返回一个 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 快速上手
- 在已经安装了
node的环境下，全局安装 gulp：
$ npm install --g gulp - 为项目安装开发依赖（devDependencies）：
$ npm install --save-dev gulp - 在项目根目录下创建
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
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
-
gulp.watch(glob[, opts], tasks)-
glob：用来指定所要监听的文件
类型：String or Array
语法：同gulp.src() -
opts：传给gaze的参数，可选参数
类型：Object -
tasks：用来指定在所监听的文件变化后要执行的任务名称
类型：Array
-
-
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
});