前端構建工具 Gulp.js 上手例項
在軟體開發中使用自動化構建工具的好處是顯而易見的。通過工具自動化執行大量單調乏味、重複性的任務，比如影象壓縮、檔案合併、程式碼壓縮、單元測試等等，可以為開發者節約大量的時間，使我們能夠專注於真正重要的、有意義的工作，比如設計業務邏輯，編寫程式碼等等。
接下來我們就一起來看看如何安裝 Gulp, 並通過一個簡單的案例感受一下Gulp的能力。
安裝 Gulp.js
Gulp.js 是基於 Node 的構建工具，類似 Grunt, 要使用它，你的機器上需要裝有 Node.js。有關如何安裝 Node, 這裡就不再贅述，可以參考官網的指導。如果你之前完全不瞭解
Node.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 個外掛, 涵蓋了前端開發流程中的很多工作，包括但不限於：
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( |