[轉載]（https://github.com/zhonglimh/Gulp）
Gulp構建前端自動化工作流
Gulp構建前端自動化工作流：入門介紹及LiveReload的使用
其實這篇內容已躺在我的Evernote里許久，但一直擱置著，今天算是正式見光。
本文主要介紹如何使用Gulp.js，來幫助你構建一個自動化的前端開發流程。總結并歸類自身使用中所遇到的方法、問題，便于新人上手和理解，同時也作為一份Gulp參考文檔來使用，讓你對Gulp有個更深入的了解。
最后，在正文開始前給新人提個醒：隨著Gulp版本更新，API已發生了細小變化，目前網上很多文章，都是基于早期版本所寫，當你查閱資料時一定要留意一下，否則會給你帶來不少麻煩。
注：
本文所使用的工具版本為：Node.js（v0.10.21）、 Ruby（v2.2.1p85）、Gulp（v3.8.11）。
如有疑問歡迎在本文下方留言，或關注我的個人微信號：bluesdream_com
Gulp是什么鬼（What's Gulp） ?
Gulp是基于Node.js的一個構建工具（自動任務運行器），開發者可以使用它構建自動化工作流程（前端集成開發環境）。一些常見、重復的任務，例如：網頁自動刷新、CSS預處理、代碼檢測、壓縮圖片、等等…… 只需用簡單的命令就能全部完成。使用它，可以簡化工作，讓你把重點放在功能開發上；同時減少人為失誤，提高開發效率和項目質量，讓專注更為專注。如果你之前接觸過Grunt，那上手Gulp就會覺得非常容易理解。
為什么使用Gulp而不使用Grunt（Why use Gulp instead of Grunt）?
構建前端自動化的工具有很多Grunt, Brunch, Broccoli…… 而目前過內最流行的屬于Grunt，之前我也在用使用，那為什么選擇Gulp來代替Grunt？
我簡單的總結了以下3點：
- 簡潔：Gulp側重“代碼優于配置”(code over configuration)。最直觀的感受，更為簡單和清晰，不需要像Grunt一樣寫一堆龐大的配置文件。
- 高效：Gulp基于Node Streams（流）來構建任務，避免磁盤反復I/O（讀取/寫入）。每個任務都是單獨執行（堅持做一件事并且做好它），這使得它速度更快、更為純粹。
- 易學：Gulp核心API只有4個。簡潔的API易于上手，學習過程比較平滑。
Gulp的核心API只有4個：src、dest、task、watch
- gulp.src(globs[, options])：指明源文件路徑
globs：路徑模式匹配；
options：可選參數；
- gulp.dest(path[, options])：指明處理后的文件輸出路徑
path：路徑（一個任務可以有多個輸出路徑）；
options：可選參數；
gulp.task(name[, deps], fn)：注冊任務
name：任務名稱（通過 gulp name 來執行這個任務）；
deps：可選的數組，在本任務運行中所需要所依賴的其他任務（當前任務在依賴任務執行完畢后才會執行）；
fn：任務函數（function方法）；gulp.watch(glob [, opts], tasks)：監視文件的變化并運行相應的任務
glob：路徑模式匹配；
opts：可以選配置對象；
taks：執行的任務；
在我使用Gulp后，就明顯感覺Grunt配置很是復雜。同樣為了實現LiveReload功能，Gulp所需要的配置的代碼，只有Grunt的一般都不到。具體可以參見我之前所寫的一篇文章《Grunt插件之LiveReload 實現頁面自動刷新，所見即所得編輯》與下文進行對比。
注：
1. streams（流）的簡述：Node.js中的I/O操作是異步的，因此磁盤的讀寫和網絡操作都需要傳遞回調函數。streams的優點：不需要把文件都一次性寫入內存，通過pie（管道）把文件轉為數據流（將任務和操作連接起來），像瀑布一樣一級級（one by one）往下流（處理），因此只需一次I/O操作。而Grunt是每執行一個任務就需要I/O一次，在任務多的時候，就會有大量I/O操作，效率自然就會比較低。
2. 以前Gulp有5個核心API，但隨著Gulp 3.5的更新，gulp.run()方法早已被棄用。
1. 安裝Node.js（Install Node.js）
1.1 首先去Node.js官網，點擊那個醒目的"INSTALL"按鈕，下載并安裝。
1.2 安裝完成以后，打開命令行（Winkey+R -> 輸入CMD）or（開始菜單 -> 所有程序 -> 選擇命令提示符），執行以下2個簡單的命令，查看Node.js是否已經安裝正確：
node -v
查看 Node.js 版本號
npm -v
查看 npm 版本號
注：
現在的Node.js會自動安裝npm（npm 是 Node.js 的包管理器，Gulp和Gulp插件就通過 npm 安裝并管理）。
2. 創建項目目錄（Create Project）
2.1 假設這個項目存放在D盤（"D:\my-gulp"），我們首先進度D盤：
d:
2.2 然后進入文件夾：
cd my-gulp
3. Gulp安裝（Installing Gulp）
3.1 全局安裝：
npm install -g gulp
安裝完成后，我們同樣可以通過 gulp -v 命令，來查看Gulp的版本號。
這時項目文件夾中生成了一個node_modules文件夾，其里面就是對應的Gulp和Gulp插件。
注：
1. Gulp全局安裝后，并不能像Grunt一樣，只需安裝一次就能在任何目下執行。他在每構建一個新項目時，都需要從這步驟開始再單獨安裝一次。
2. 至于為什么要這樣，有人在stackoverflow上提出過疑問。得到的大致回復是為了更加靈活，因為有些插件基于特定的版本，這樣做的話每個項目就等于都是獨立的，互不影響。
3.2 本地安裝：
npm install gulp --save-dev
注：
1. -g：代表全局安裝；
2. --save：將保存配置信息至package.json（此文件在 node_modules\gulp 目錄下）
3. -dev：將它作為你的項目依賴添加到中devDependencies內（--save和-dev是2個東西，記得分清前面的"-"號）
4. 由于Gulp會自帶package.json文件（用于存儲項目的元數據），所以這里只做簡單介紹（如果你想自己創建，也可通過命令 npm init，然后根據引導填寫相關信息）：
{
"name": "gulp", // 模塊名稱：只能包含小寫字母數字和中劃線，如果為空則使用項目文件夾名稱代替（必填）
"version": "3.8.11", // 版本號（必填）
"description": "The streaming build system", // 描述：會在npm搜索列表中顯示（必填）
"homepage": "http://gulpjs.com", // 項目主頁
"repository": { // 資源庫
"type": "git",
"url": "git://github.com/gulpjs/gulp"
},
"author": { // 作者信息
"name": "Ryan",
"email": "contact@bluesdream.com",
"url": "http://www.bluesdream.com/"
},
"licenses": [{ // 開源協議
"type": "MIT",
"url": "https://raw.githubusercontent.com/gulpjs/gulp/master/LICENSE"
}],
"devDependencies": { // 這里面的參數，指定了項目依賴的Gulp和Gulp插件版本。
"gulp": "^3.8.11"
}
}
4. Gulp插件安裝（Install Gulp Plugins）
接著安裝我們所需要的插件，這里，我們通過gulp-livereload + gulp-webserver，來實現頁面自動刷新：
靜態服務器（ gulp-webserver ）
網頁自動刷新（ gulp-livereload ）
npm install gulp-livereload gulp-webserver --save-dev
5. Gulp任務配置（Task Configuration）
5.1 在項目根目錄中，創建gulpfile.js文件，用來配置和定義任務（task）。
5.2 打開Gulpfile.js文件中，填寫相關配置：
// 引入gulp
var gulp = require('gulp'); // 基礎庫
// 引入gulp插件
var livereload = require('gulp-livereload'), // 網頁自動刷新（服務器控制客戶端同步刷新）
webserver = require('gulp-webserver'); // 本地服務器
// 注冊任務
gulp.task('webserver', function() {
gulp.src( './' ) // 服務器目錄（./代表根目錄）
.pipe(webserver({ // 運行gulp-webserver
livereload: true, // 啟用LiveReload
open: true // 服務器啟動時自動打開網頁
}));
});
// 監聽任務
gulp.task('watch',function(){
gulp.watch( '*.html', ['html']) // 監聽根目錄下所有.html文件
});
// 默認任務
gulp.task('default',['webserver','watch']);
5.2.1 執行默認：
gulp
看到如下提示說明執行成功：
[18:19:24] Using gulpfile D:\my-gulp\gulpfile.js
[18:19:24] Starting 'webserver'...
[18:19:24] Webserver started at http://localhost:8000
[18:19:24] Finished 'webserver' after 10 ms
[18:19:24] Starting 'watch'...
[18:19:24] Finished 'watch' after 97 ms
想要終止任務，只需Ctrl+c根據提示輸入y便能終止，或直接關閉命令提示符。
5.2.2 執行特定任務：
grunt webserver
看到如下提示說明執行成功：
[18:21:56] Using gulpfile D:\my-gulp\gulpfile.js
[18:21:56] Starting 'webserver'...
[18:21:56] Webserver started at http://localhost:8000
[18:21:56] Finished 'webserver' after 10 ms
至此，你已輕松學會如何使用Gulp，并對它有一個大致的了解。
注：
1. Gulp插件可以通過Gulp官網 、 npm官網 或 Browsenpm 上找到你所要的插件。
2. 不要在node_modules文件夾內手動刪除插件，請使用命令卸載。因為手動刪除的只是下載插件包，但package.jason中的配置信息并沒有清除。
3. 不要直接移動Gulp插件，否則由于系統層級限制，出現錯誤提示“文件名對目標文件夾可能過長。您可以縮短文件名并重試，或者嘗試路徑較短的位置?！?。此時把文件夾打包成RAR后再操作便可。
4. npm常用命令：
安裝插件：npm <module> [-g] [--save-dev]
更新插件：npm update <module> [-g] [--save-dev]
卸載插件：npm uninstall <module> [-g] [--save-dev]
指定版本：npm install <module>@VERSION [--save-dev] （其中VERSION就是你所需要的版本號）
參考資料：
Building With Gulp
Introduction to Gulp.js – Code Over Configuration
An introduction to Gulp
擴展資料：
Gulp API docs
gulp-cheatsheet
