前端構建工具 Gulp.js 上手實例

在軟件開發中使用自動化構建工具的好處是顯而易見的。經過工具自動化運行大量單調乏味、重複性的任務，好比圖像壓縮、文件合併、代碼壓縮、單元測試等等，能夠爲開發者節約大量的時間，使咱們可以專一於真正重要的、有意義的工做，好比設計業務邏輯，編寫代碼等等。

對不少前端開發人員而言，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 (Node 包管理工具) 來安裝便可。在命令行模式下執行：

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 平臺上的更棒。並且它的插件庫也不斷在增加，尤爲是如今有這麼多開發者對它有興趣，相信它會獲得快速的發展。

若是你尚未嘗試過，不妨嘗試一下。