Gulp， 比Grunt更好用的前端構建工具
本文主要從兩個方面介紹Gulp：一，Gulp相對於Grunt的優勢； 二，Gulp的安裝和使用流程
Gulp相對於Grunt的優勢
gulp.js 的作者 Eric Schoffstall 在他介紹 gulp.js 的 presentation 中總結了 Grunt 的幾點不足之處：
-
插件很難遵守單一責任原則。因為 Grunt 的 API 設計缺憾，使得許多插件不得不負責一些和其主要任務無關的事情。比如說要對處理后的文件進行更名操作，你可能使用的是
uglify插件，也有可能使用的是concat插件（取決於工作流的最后一個環節是誰）。我的看法：這或許是個問題，對很多人來說 Grunt 插件多少存在“職責不明”和“越俎代庖”的情況。在我看來，這也是 Grunt 一個設計思想：把對文件的操作抽象為一個獨立的組件（Files），任何插件都以相同的規則來使用它。遺憾在於，使用它的過程發生在每個插件的獨立配置對象里，所以總給人一種“把不該這個插件做的事情丟給它來做”的別扭感覺。
-
用插件做一些本來不需要插件來做的事情。因為 Grunt 提供了統一的 CLI 入口，子任務由插件定義，由 CLI 命令來調用執行，因此哪怕是很簡單的外部命令（比如說運行
karma start）都得有一個插件來負責封裝它，然后再變成 Grunt CLI 命令的參數來運行，多此一舉。我的看法：舉雙手雙腳贊成！
-
試圖用配置文件完成所有事，結果就是混亂不堪。規模較大，構建／分發／部署流程較為復雜的項目，其
Gruntfile有多龐雜相信有經歷的人都有所體會。而 gulp.js 奉行的是“寫程序而不是寫配置”，它走的是一種 node way。我的看法：對於 node.js 開發者來說這是好事，符合他們的一貫作風；不過對於那些純前端工程師來說（數量不小），這似乎沒有什么顯著的改善。況且近來 Grunt 社區涌現了不少插件來幫助開發者組織／管理／簡化臃腫的
Gruntfile，效果都還不錯。所以關於這一點，就見仁見智吧。 -
落后的流程控制產生了讓人頭痛的臨時文件／文件夾所導致的性能滯后。這是 gulp.js 下刀子的重點，也是本標題里“流式構建”所解決的根本問題。流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是：更快。
我的看法：關於流式構建，短短幾句話無法講清它的來龍去脈，但是在 node.js 的世界里，
streaming確實是至關重要的。我推薦一份閱讀材料：Stream Handbook，讀過之后相信心里就有數了。
作為對比和總結，作者列出了 gulp.js 的五大特點：
- 使用 gulp.js，你的構建腳本是代碼，而不是配置文件；
- 使用標准庫（node.js standard library）來編寫腳本；
- 插件都很簡單，只負責完成一件事－基本上都是 20 行左右的函數；
- 任務都以最大的並發數來執行；
- 輸入／輸出（I/O）是基於“流式”的。
Gulp的安裝和使用流程
第一步：安裝命令行工具
$ npm install -g gulp
第二步：在你的項目下把 gulp 安裝為開發依賴組件（假設你已經創建好了 package.json）
$ cd <YOUR_PROJECT>
$ npm install gulp --save-dev
第三步：在項目的根路徑下創建 Gulpfile.js，初始內容為：
var gulp = require('gulp');
gulp.task('default', function () {
});
第四步：運行！
var gulp = require('gulp');
gulp.task('default', function () {
});
So far so good! 看起來和 Grunt 沒差太遠吧？的確如此，gulp.js 的學習曲線還是相當平緩的。接下來，為了能夠順利的編寫構建腳本，我們來學習幾個核心的 API 函數——別擔心，gulp.js 的 API 非常簡單，我們只需要了解四個就足以應對絕大多數的腳本編寫了（而且用過 Grunt 的話，這四個都不是什么新鮮貨）。
-
gulp.task(name[, deps], fn)：注冊任務name是任務名稱；deps是可選的數組，其中列出需要在本任務運行要執行的任務；fn是任務體，這是 gulp.js 的核心了，需要花時間吃透它，詳情見此。 -
gulp.src(globs[, options])：指明源文件路徑
用過 Grunt 的話，globs一定不會陌生，這里沒什么變化；options是可選的，具體請查看 gulp.js API -
gulp.dest(path)：指明任務處理后的目標輸出路徑 -
gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：監視文件的變化並運行相應的任務。你沒看錯，watch作為核心 API 出現在 gulp.js 里了，具體用法還是要多看文檔，不過接下來我們會演示簡單的例子。
范例
我們練習一個最常見的范例，寫一個 node.js 程序時所需要的構建腳本。為此我們要做三件事情（括號內列出對應插件的名字，更多插件請到此處尋找）：
- 語法檢查 （
gulp-jshint） - 合並文件 （
gulp-concat） - 壓縮代碼 （
gulp-uglify） - 文件重命名（
gulp-rename）
另外，我們可能還需要文件更名操作，所以 gulp-rename 也會很有用。接着我們需要先在項目下安裝這些插件：
$ npm install <PLUGIN_NAME> --save-dev
最后我們完成所有任務的編寫，完整的代碼如下：
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 語法檢查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合並文件之后壓縮代碼
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('dist'));
});
// 監視文件的變化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
});
// 注冊缺省任務
gulp.task('default', ['jshint', 'minify', 'watch']);
可以看出，基本上所有的任務體都是這么個模式：
gulp.task('任務名稱', function () {
return gulp.src('文件')
.pipe(...)
.pipe(...)
// 直到任務的最后一步
.pipe(...);
});
非常容易理解！獲取要處理的文件，傳遞給下一個環節處理，然后把返回的結果繼續傳遞給下一個環節……直到所有環節完成。pipe 就是 stream 模塊里負責傳遞流數據的方法而已，至於最開始的 return 則是把整個任務的 stream 對象返回出去，以便任務和任務可以依次傳遞執行。
或許寫成這樣會更直觀：
gulp.task('task_name', function () {
var stream = gulp.src('...')
.pipe(...)
.pipe(...)
// 直到任務的最后一步
.pipe(...);
return stream;
});
至此，你已經可以使用 gulp.js 完成絕大多數的構建工作了。下一步，我也為你准備了幾條建議：
- 花點時間瀏覽一下 gulp.js 插件庫，大致了解下利用已有的插件你都可以做哪些事情
- 對於常用的插件，仔細閱讀它們自己的文檔，以便發揮出它們最大的功效
- 抽時間學習 gulp.js API，特別是
gulp.task()里關於任務體的詳細描述，學會如何執行回調函數（callback），如何返回promise等等 - 嘗試編寫適合自己工作流程和習慣的任務，如果它工作良好，把它做成插件發布給大家吧！