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