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設置生成文件的路徑，一個任務可以有多個生成路徑，一個可以輸出未壓縮的版本，另一個可以輸出壓縮后的版本

參考

1、Gulp：任務自動管理工具 -- JavaScript 標准參考教程（alpha）
http://javascript.ruanyifeng.com/tool/gulp.html
2、入門指南 - gulp.js 中文文檔 | gulp.js 中文網
http://www.gulpjs.com.cn/docs/getting-started/
3、Gulp學習指南之CSS合並、壓縮與MD5命名及路徑替換 - YuanWing Notes - SegmentFault
https://segmentfault.com/a/1190000002932998
4、gulp入門教程 - 王叨叨 - SegmentFault
https://segmentfault.com/a/1190000002698606
5、nimojs/gulp-book: Gulp 入門指南
https://github.com/nimojs/gulp-book
6、Gulp開發教程（翻譯） - w3ctech - 中國最大的前端技術社區
http://www.w3ctech.com/topic/134