前端任務構建利器Gulp.js使用指南

本文由碼農網 – 陸書明原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在軟體開發中，任務執行器的好處是不言而喻的。它們可以幫助自動執行常見的冗長的任務，讓你可以專注於更重要的事情中，比如敲出很棒的程式碼。說的嚴肅點，自動執行一些比如圖片壓縮、程式碼壓縮、單元測試以及更多的任務的技能，簡直就是節省時間的利器。

對於很多前端開發者而言，時下使用最多的工作管理員就是Grunt了，一個可以讓你在Gruntfile.js檔案中使用JavaScript定義各種執行任務的工具。基本上，只要你瞭解JavaScript，建立一個Grunt任務是非常簡單直接的事情。豐富的第三方外掛比如JSHint,Sass還有Uglify等等，讓Grunt成為最易擴充套件的工具之一。

對於多數人來講，一直以來都選擇Grunt作為任務執行器。不過最近，因為易於安裝，擁有更加易讀和管理的超級簡單的配置檔案，一個叫Gulp.js的工具吸引了大批人的眼球。

安裝Gulp.js

Gulp.js跟Grunt一樣，都是基於Node的任務執行工具。所以你必須安裝Node來執行它。有幾種不同的方法可以安裝Gulp，取決於你的作業系統。在OS X中，我用nvm，這是Tim Caswell寫的用於管理多個Node.js版本的很不錯的指令碼工具。你也可以直接從Node.js官方網站下載二進位制檔案。如果你對Node還一無所知的話，那我建議你最好去Nettuts+series先熟悉一下Node.js。

我們可以用npm（Node包管理器）來快速安裝Gulp。開啟你的終端然後輸入:

npm install -g gulp

這條指令，從npm的序號產生器制中獲取gulp並全域性安裝到你的系統中，以便你可以直接在命令列中訪問它。

安裝好了gulp，下面我們開始在專案中來使用它。

使用Gulp.js建立你的專案

要在專案中使用Gulp，必須完成下面關鍵幾點：

• 安裝兩個依賴包
• 安裝任何你想使用的外掛
• 建立Gulp.js檔案然後定義你打算執行的任務

請在專案的路徑下完成以上幾點，這樣Gulp才能使用你的配置檔案。

首先，安裝依賴包：

npm install --save-dev gulp gulp-util

現在我們需要安裝在配置檔案中定義好的用來執行指定任務的Gulp外掛。這些外掛都是Node包，所以我們再次使用npm來安裝它們。

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

我這裡安裝兩個外掛，讓我可以使用Uglify.js壓縮器來精簡/壓縮JavaScript程式碼並且將多個JS檔案合併到一個檔案中去。

注意，我這裡用的—save-dev，這個指令讓我只在當前專案中安裝Gulp依賴包跟外掛。這麼做可以在package.json中的devDependencies列表中為每個依賴項生成對應的詞條標識。就像下面展示的：

{
  "devDependencies": {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

這樣可以確保使用npm為專案安裝任何依賴包和外掛。如果在專案中沒有package.json檔案，那在命令列輸入npm init或者乾脆在編輯器中手動建立一個，寫好對應的卷括號，然後儲存命名為”package.json”。在命令列中輸入npm指令來更新它。請注意，必須要使用卷括號，不然，當你試圖使用—save-dev時，npm會丟擲一個錯誤顯示它不是一個合法的JSON檔案。

雖然在本篇指南中我只用了兩個外掛，不過Gulp提供了超過200個外掛來滿足不同的功能需求，包括：

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

還有好多好多···

Gulpfile.js檔案

跟Grunt一樣，Gulp有一個叫做gulpfile.js的同名配置檔案，裡面定義了執行任務的所有的必須的外掛。你要在專案的根目錄下建立這個檔案。

簡單直白的語法，讓gulp檔案非常易讀能懂：

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

上面程式碼簡單告訴gulp需要引用哪些外掛來完成既定的任務。

下一步，我們需要定義Gulp執行的任務。我這裡，定義兩個：

• 壓縮圖片
• 精簡JS檔案

我們使用Gulp的方法task()來定義要執行的任務：

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

看看上面的程式碼，用的是引用的外掛組成的一個混合方法呼叫。第一個方法task(),使用一個名稱代表當前任務（這裡就叫’js’），還有一個匿名方法囊括了實際的操作。我們來拆解一下程式碼：

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

src()方法指定了要從哪裡找到需要壓縮的JS檔案，並且將其轉換成包含文件結構的資料流以傳入後續執行的外掛中。這是Node.js Streams API中的一部分，也正是Gulp擁有簡明API語法的原因之一。

.pipe(uglify())

pipe()方法從src()方法中獲得傳過來的資料流，然後傳入指定的外掛中。在當前例子中，外掛uglify將接收資料流。

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

像uglify一樣，外掛concat通過pipe()接收傳過來的資料流，然後將多個JS檔案合併到’all.js’中。

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

最後，使用Gulp的dest()方法，將all.js寫到指定目錄中，整個過程簡介易讀。

還有最後一個我們要做的事情，就是更改Gulp的預設執行任務為”js”。

gulp.task('default', function(){
    gulp.run('js'); 
});

返回到命令列，輸入’gulp’，Gulp找到了gulpfile.js檔案，載入所有的依賴項跟外掛，執行預設任務’js’。你可以在下圖看到最後的執行結果，檔案被壓縮合並了:

讓我們更近一步吧。Gulp提供了另外一個方法叫watch()，它可以監視指定的資源變更。跟手動輸入’gulp’執行任務不同，這個方法允許根據資源的改變自動執行任務。

gulp.watch('./js/*', function () {
     gulp.run('js');
});

當上面的程式碼執行的時候，Gulp會繼續保持對指定資源的監視，一旦資源發生變更，就會再次執行’js’方法。這個功能很棒！

向Gulp.js過渡

當我剛聽說Gulp的時候，我第一反應就是“又一個超棒的工具！”。Gulp.js確實擁有著吸引人的語法跟API，它讓構建任務變得輕而易舉。儘管外掛沒有Grunt豐富，但是它的外掛庫看起來已經在日趨增長，特別是現在擁有著對它感興趣的這麼多的開發者。

我已經建議很多開發者讓他們積極地遷移到Gulp中來，現在是加入Gulp.js的大好時機！