摘要：流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關于流式構建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關重要的。

Grunt 一直是前端領域構建工具（任務運行器或許更準確一些，因為前端構建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那么，究竟是什么使得 gulp.js 備受關注呢？

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.js 的官方文檔都在 Github 上，本文是一個簡介，更具體的細節還請自行閱讀文檔。在這里我就 gulp.js 的安裝和使用流程做一個簡述，先一起來領略一下 gulp.js 的風采吧。

$ npm install -g gulp

$ cd 
$ npm install gulp --save-dev

var gulp = require("gulp");

gulp.task("default", function () {
});

$ gulp

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 也會很有用。接著我們需要先在項目下安裝這些插件：

$ npm install  --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 等等

嘗試編寫適合自己工作流程和習慣的任務，如果它工作良好，把它做成插件發布給大家吧！