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