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

對很多前端開發人員而言，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 平臺上的更棒。而且它的插件庫也不斷在增長，尤其是現在有這么多開發者對它有興趣，相信它會得到快速的發展。

總結

以上是生活随笔為你收集整理的前端构建工具 Gulp.js 上手实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。