gulp：更简单的自动化构建工具

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。为何使用gulp？由于Gulp更简单。Grunt任务拥有大量的配置，会引用大量你实际上并不须要的对象属性，可是Gulp里一样的任务也许只有几行。有兴趣的同窗在学完本文后对比使用Grunt，你就会发现Gulp的代码量是最少的。

安装

须要先安装node.js。这里安装的v5.11.0。
使用node -v查看版本号。

gulp的安装不是很顺利。按照官方给的安装方法：

npm install --global gulp
npm install --save-dev gulp

先全局安装，而后再在项目的开发目录中安装为本地模块。可是在命令行输入gulp会提示：

Local gulp not found in ...

好吧，百度搜索了一番，知乎上有朋友回答了，不要全局安装，直接安装为本地模块。发现问题解决了一半：

npm install --save-dev gulp

而后调用的问题，在项目目录仍是没法执行命令。不过因为安装在node_modules，很快找到了可执行命令的路径：

node_modules/.bin/gulp

非Windows的朋友，能够直接使用：

./node_modules/.bin/gulp

运行命令，Windows的朋友须要到node_modules/.bin/目录去执行gulp。不过看了gulp.cmd的内容，稍微改改，能够复制一份gulp.cmd到项目根目录：

node  "%~dp0\..\.npminstall\gulp\3.9.1\gulp\bin\gulp.js" %*

改成：

node  "%~dp0\node_modules\.npminstall\gulp\3.9.1\gulp\bin\gulp.js" %*

就好了。当前目录执行：

>gulp
[21:30:58] Using gulpfile D:\Projects\gulp\gulpfile.js
[21:30:58] Task 'default' is not in your gulpfile
[21:30:58] Please check the documentation for proper gulpfile formatting

这里因为安装慢，使用了淘宝的镜像。命令后加

--registry=https://registry.npm.taobao.org

参数便可。或者安装个cnpm命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

下次使用cnpm代替npm。

简单示例

这里以压缩zepto.js为例。

须要先安装gulp插件模块gulp-uglify:

npm install --save-dev gulp-uglify

安装为本地模块。

须要新建配置文件gulpfile.js。项目根目录中的gulpfile.js，是Gulp的配置文件。示例：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
  gulp.src('js/zepto.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

上面代码中，gulpfile.js加载gulp和gulp-uglify模块以后，使用gulp模块的task方法指定任务minify。

task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，而后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。

task方法的回调函数使用了两次pipe方法，也就是说作了两种处理。第一种处理是使用gulp-uglify模块，压缩源码；第二种处理是使用gulp模块的dest方法，将上一步的输出写入本地文件，这里是build.js（代码中省略了后缀名js）。

好，配置完成。如何执行这个任务呢?

很简单，在命令行输入：

gulp minify

就好了。记住，是gulp后面跟任务(task)名。运行结果：

>gulp minify
[21:43:52] Using gulpfile D:\Projects\gulp\gulpfile.js
[21:43:52] Starting 'minify'...
[21:43:52] Finished 'minify' after 10 ms

在build目录生成了压缩过的zepto.js。

没有修过gulp或者gulp.cmd的同窗须要执行：

./node_modules/.bin/gulp minify

下面的示例直接使用gulp命令。

压缩多个js文件

假若有js目录下有多个js文件，例如:

zepto.js
util.js
my.js

下面任务将会压缩js目录里全部的js文件：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

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

在build文件夹会生成压缩过的全部js文件：

zepto.js
util.js
my.js

文件名仍是同样的。

gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法通常有如下几种形式。

js/app.js：指定确切的文件名。
js/*.js：某个目录全部后缀名为js的文件。
js/**/*.js：某个目录及其全部子目录中的全部后缀名为js的文件。
!js/app.js：除了js/app.js之外的全部文件。

同时使用多个组件

除了压缩，咱们可能还须要进行代码检查(jshint)、合并(concat)等工做：

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('js', function () {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build'));
});

须要先安装依赖组件：

npm install jshint gulp-jshint --save-dev
npm install gulp-concat --save-dev

uglify前面咱们已经安装了。安装jshint须要注意，还要安装jshint自己，不然会报错：

Error: Cannot find module 'jshint/src/cli'

安装插件完成后，执行：

gulp js

便可。会在build目录生成all.min.js压缩合并后的文件。

gulp经常使用插件

插件地址：http://gulpjs.com/plugins/

压缩css(gulp-minify-css)
合并文件(gulp-concat)
js代码校验(gulp-jshint)
压缩js代码(gulp-uglify)
less编译(gulp-less)
sass编译(gulp-sass)
stylus编译(gulp-stylus)
自动添加css前缀(gulp-autoprefixer)
压缩图片(gulp-imagemin)
自动刷新页面(gulp-livereload)
图片缓存，只有图片替换了才压缩(gulp-cache)
更改提醒(gulp-notify)

能够一条命令一次性安装：

npm install gulp-sass gulp-minify-css gulp-jshint gulp-concat gulp-uglify --save-dev

使用watch监视文件变更

本例经过监听less文件的变更生成编译好的css文件。
准备好css/demo.less文件：

@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}

gulpfile.js任务内容：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('doless', function () {
  return gulp.src('css/*.less')
    .pipe(less())
    .pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
   gulp.watch('css/*.less', ['doless']);
});

注意要先安装好gulp-less组件。当css/文件夹里任意less文件发送了变化 ，将执行doless任务：使用less方法编译生成对应的demo.css文件。

运行：

gulp watch

显示：

>gulp watch
[22:23:21] Using gulpfile D:\Projects\gulp\gulpfile.js
[22:23:21] Starting 'watch'...
[22:23:21] Finished 'watch' after 13 ms

咱们如今去编辑css/demo.less文件，发现命令行自动执行了doless任务：

[22:23:25] Starting 'doless'...
[22:23:25] Finished 'doless' after 66 ms

在build/文件夹生成了demo.css：

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

固然，能够添加更多任务：

var gulp = require('gulp');
var less = require('gulp-less');
var minify = require('gulp-minify-css');
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer');

gulp.task('doless', function () {
  return gulp.src('css/*.less')
    .pipe(less())
    .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
    .pipe(gulp.dest('build'))
    .pipe(minify())
    .pipe(concat('all.min.css'))
    .pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
   gulp.watch('css/*.less', ['doless']);
});

API

gulp只有四个API： task,watch,src, dest

task 这个API用来建立任务
watch 这个API用来监放任务
src 这个API设置须要处理的文件的路径，能够是多个文件以数组的形式
dest 这个API设置生成文件的路径，一个任务能够有多个生成路径，一个能够输出未压缩的版本，另外一个能够输出压缩后的版本

参考

一、Gulp：任务自动管理工具 -- JavaScript 标准参考教程（alpha） http://javascript.ruanyifeng.com/tool/gulp.html 二、入门指南 - gulp.js 中文文档 | gulp.js 中文网 http://www.gulpjs.com.cn/docs/getting-started/ 三、Gulp学习指南之CSS合并、压缩与MD5命名及路径替换 - YuanWing Notes - SegmentFault https://segmentfault.com/a/1190000002932998 四、gulp入门教程 - 王叨叨 - SegmentFault https://segmentfault.com/a/1190000002698606 五、nimojs/gulp-book: Gulp 入门指南 https://github.com/nimojs/gulp-book 六、Gulp开发教程（翻译） - w3ctech - 中国最大的前端技术社区 http://www.w3ctech.com/topic/134