前端构建工具 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 平臺上的更棒。而且它的插件庫也不斷在增長，尤其是現在有這么多開發者對它有興趣，相信它會得到快速的發展。
總結
以上是生活随笔為你收集整理的前端构建工具 Gulp.js 上手实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 探寻宝藏
- 下一篇： dubbo和mq的使用场景