在軟體開發中使用自動化構建工具的好處是顯而易見的。通過工具自動化執行大量單調乏味、重複性的任務，比如影象壓縮、檔案合併、程式碼壓縮、單元測試等等，可以為開發者節約大量的時間，使我們能夠專注於真正重要的、有意義的工作，比如設計業務邏輯，編寫程式碼等等。

對很多前端開發人員而言，Grunt 無疑是這方面的首選。基本上，如果你會用 JavaScript ，那麼在一個名為 Gruntfile.js （或者 Gruntfile）的檔案中用 Javascript 語言定義自動化任務是非常簡單的過程，同時大量的 第三方外掛 例如 JSHint, Sass 以及 Uglify 也使得 Grunt 具有了良好的可擴充套件性。

大多數情況下，Grunt 一直是前端構建工具的首選。但是最近一個名為 Gulp.js 的新工具正在吸引越來越多的人的關注。相比 Grunt, 它具有可讀性更強、更利於理解的配置檔案，更簡單地配置過程。

接下來我們就一起來看看如何安裝 Gulp, 並通過一個簡單的案例讓你感受一下這個新的構建工具。

安裝 Gulp.js

Gulp.js 是基於 Node 的構建工具，類似 Grunt, 要使用它，你的機器上需要裝有 Node.js。有關如何安裝 Node, 這裡就不再贅述，可以參考官網的指導。如果你之前完全不瞭解 Node.js, 可以參考一下 Nettuts+ 上面的系列教程。 有了 Node.js, 安裝 Gulp.js 就非常容易了，只需要通過

npm install -g gulp

這樣就可以將 gulp 以全域性方式安裝到你的電腦上，以後可以隨時通過命令列的 gulp 命令來呼叫。

在前端專案中配置 Gulp.js

要在你的專案中使用 Gulp, 有幾個關鍵的步驟需要完成：

• 安裝兩個依賴包
• 安裝你需要的任意外掛
• 建立 gulpfile.js 檔案，在其中定義你要執行的任務

這些步驟需要在你的專案根目錄下完成。

首先，要安裝依賴項：

npm install --save-dev gulp gulp-util

接下來，安裝我們需要使用到的 Gulp 外掛，這些外掛同樣也都是 Node 模組，我們同樣使用 npm

npm install --save-dev gulp-uglify gulp-concat

在上面的例子中，安裝了兩個外掛 gulp-uglify 和 gulp-concat, 通過它們可以對 Javascript 檔案進行合併和壓縮。

注意這裡使用了 --save-dev 引數來安裝 Gulp 依賴和外掛，加上這個引數以後，在安裝這些包的同時，也會把它們新增到我們的包配置檔案 package.json:

{
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.2.1",
    "gulp-util": "^2.2.14"
  }
}

這樣可以確保專案所需的依賴包可以便捷地通過 npm 來進行安裝。 如果你的專案沒有 package.json 檔案，可以在命令列通過 npm init 來建立， 也可以通過文字編輯器建立。這是 npm 相關的知識，這裡就不細說了。

在前面的例子中，只安裝了兩個外掛，Gulp 提供了超過 200 個外掛, 涵蓋了前端開發流程中的很多工作，包括但不限於：

• LiveReload (gulp-livereload)
• JSHint (gulp-jshint)
• Sass (gulp-sass)
• CoffeeScript file compilation (gulp-coffee)

還有很多，可以到 Gult plugins 進行搜尋。

Gulpfile.js 檔案

與 Grunt 一樣， Gulp 也有一個同名配置檔案，叫做 gulpfile.js, 在這個檔案裡定義需要用到什麼外掛，執行什麼任務，如何執行等等。 這個檔案應該存放在你的專案根目錄下。

到目前為止，一切看起來都和 Grunt 沒什麼區別，那麼為什麼要介紹 Gulp 呢？接下來就是它的優勢所在了。 gulpfile.js 的語法非常簡單直接，具有非常好的可讀性，便於理解。看一下例子：

var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

這就是一條非常簡單的 Javascript 變數定義語句，它告訴 Gulp 我們需要哪些外掛來完成下面的任務定義。

接下來，我們要定義需要 Gulp 去執行的任務。在這個例子中，需要 Gulp 去完成兩件事：

• 壓縮 Javascript 檔案
• 合併 Javascript 檔案

在 Gulp 中，定義任務非常直接，就是呼叫 Javascript 的方法。我們通過 Gulp 提供的 task() 方法來定義任務：

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

看一下上面的程式碼，gulp.task(name, callback) 方法需要兩個引數，第一個是任務名稱，第二個是回撥函式。這個一看就明白了，沒什麼要解釋的。看一下回調函式裡面的程式碼：

gulp.src('./js/*.js')

src() 方法用來指定要處理的 js 檔案的位置，它會獲取匹配到的所有 js 檔案的路徑，並將它們轉換為可以傳遞給外掛進行處理的“流”。這是 Node.js 的 Streams API 的組成部分，也是 Gulp 能夠實現如此簡潔的 API 語法的原因。

.pipe(uglify())

pipe() 方法獲取剛才通過 src() 方法獲得並傳遞過來的“流”，並將其傳遞給指定的外掛。本例中是 uglify 外掛。

.pipe(concat('all.js'))

與 uglify 一樣，concat 外掛通過 pipe() 方法接收經過上一個方法處理之後返回的“流”，並把他們該“流”中的所有 Javascript 檔案合併為一個名為 "all.js" 的檔案。

.pipe(gulp.dest('./js'));

最後，通過 Gulp 的 dest() 方法， "all.js" 被寫入到我們指定的目錄。整個過程非常直觀，易於理解。可以想象一下 jQuery 的鏈式呼叫，也可以想象一下 *nix 系統下的 grep, awk 這些命令。

我們要做的最後一件事，是指定 Gulp 的預設任務，讓它執行我們剛才定義的 "js" 任務。

gulp.task('default', ['js']);

完整的 gulpfile.js:

// 定義依賴項和外掛
var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

// 定義名為 "js" 的任務
gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

// 定義預設任務
gulp.task('default', ['js']);

回到命令列（專案根目錄），輸入 gulp, 回車。 Gulp 找到 gulpfile.js 檔案，載入依賴的外掛，啟動預設任務，然後執行我們的 "js" 任務, 你可以看到最終結果

Gulp 還提供了一個名為 watch() 的方法，可以自動檢查指定的資源（檔案）的變化。這樣就可以在檔案發生變化時自動執行特定的任務，不必每次修改了檔案就要回到命令列手動執行 gulp.

gulp.watch('./js/*.js', ['js']);

這行程式碼執行時， Gulp 會持續監控 ./js/ 目錄下所有的 js 檔案，一旦檔案發生變化，就會自動重新執行 "js" 任務來合併和壓縮檔案。當然，這行程式碼通常也要放到某個任務中去執行。

轉到 Gulp.js

在我開始使用 Grunt 之前的幾年裡，一直是使用 濤哥 開發的 CssGaga 來做前端構建工具。這是當時我們工作標準流程的一部分，它非常強大。

後來從 isux 轉崗到 TGideas, 工作流程發生了巨大的變化，同時我在 Windows / Linux / Mac 不同平臺下工作的時間也越來越多，於是轉向了 Grunt. 與 CssGaga 相比， Grunt 需要自己去尋找需要的外掛，在每個專案中進行適當的配置來完成構建工作，但是它跨平臺、按需組合功能的特性較好地滿足了我的需要。之後又聽說過、嘗試過一些前端構建工具，但都沒有讓我放棄 Grunt.

第一次看到 Gulp 的介紹時，就被它的配置語法所吸引。因為對於任何一個接觸過 Node.js 的人來說，這語法是在是太舒服了。一看就懂，看一遍就會，不是嗎？暫時來說，它的外掛數量還沒有 Grunt 那麼多那麼全面，不過日常的前端任務，還是都涵蓋了，而且有一些實現得比 Grunt 平臺上的更棒。而且它的外掛庫也不斷在增長，尤其是現在有這麼多開發者對它有興趣，相信它會得到快速的發展。

如果你還沒有嘗試過，不妨嘗試一下。

本文主要內容翻譯自：Managing Your Build Tasks With Gulp.js，原作者 Rey Bango

參閱

• http://gulpjs.com/
• https://github.com/gulpjs/gulp