[轉(zhuǎn)載]（https://github.com/zhonglimh/Gulp）
Gulp構(gòu)建前端自動化工作流
Gulp構(gòu)建前端自動化工作流：入門介紹及LiveReload的使用
其實這篇內(nèi)容已躺在我的Evernote里許久京痢，但一直擱置著类嗤，今天算是正式見光雇初。
本文主要介紹如何使用Gulp.js灭袁，來幫助你構(gòu)建一個自動化的前端開發(fā)流程±砼螅總結(jié)并歸類自身使用中所遇到的方法眯娱、問題，便于新人上手和理解弟灼，同時也作為一份Gulp參考文檔來使用级解，讓你對Gulp有個更深入的了解。
最后田绑，在正文開始前給新人提個醒：隨著Gulp版本更新勤哗，API已發(fā)生了細小變化，目前網(wǎng)上很多文章掩驱，都是基于早期版本所寫芒划，當你查閱資料時一定要留意一下，否則會給你帶來不少麻煩欧穴。
注：
本文所使用的工具版本為：Node.js（v0.10.21）民逼、 Ruby（v2.2.1p85）、Gulp（v3.8.11）涮帘。
如有疑問歡迎在本文下方留言拼苍，或關(guān)注我的個人微信號：bluesdream_com
Gulp是什么鬼（What's Gulp） ?
Gulp是基于Node.js的一個構(gòu)建工具（自動任務運行器），開發(fā)者可以使用它構(gòu)建自動化工作流程（前端集成開發(fā)環(huán)境）调缨。一些常見映屋、重復的任務，例如：網(wǎng)頁自動刷新同蜻、CSS預處理棚点、代碼檢測、壓縮圖片湾蔓、等等…… 只需用簡單的命令就能全部完成瘫析。使用它，可以簡化工作，讓你把重點放在功能開發(fā)上贬循；同時減少人為失誤咸包，提高開發(fā)效率和項目質(zhì)量，讓專注更為專注杖虾。如果你之前接觸過Grunt烂瘫，那上手Gulp就會覺得非常容易理解。
為什么使用Gulp而不使用Grunt（Why use Gulp instead of Grunt）?
構(gòu)建前端自動化的工具有很多Grunt, Brunch, Broccoli…… 而目前過內(nèi)最流行的屬于Grunt奇适，之前我也在用使用坟比，那為什么選擇Gulp來代替Grunt？
我簡單的總結(jié)了以下3點：
- 簡潔：Gulp側(cè)重“代碼優(yōu)于配置”(code over configuration)嚷往。最直觀的感受葛账，更為簡單和清晰，不需要像Grunt一樣寫一堆龐大的配置文件皮仁。
- 高效：Gulp基于Node Streams（流）來構(gòu)建任務籍琳，避免磁盤反復I/O（讀取/寫入）。每個任務都是單獨執(zhí)行（堅持做一件事并且做好它）贷祈，這使得它速度更快趋急、更為純粹。
- 易學：Gulp核心API只有4個势誊。簡潔的API易于上手宣谈，學習過程比較平滑。
Gulp的核心API只有4個：src键科、dest闻丑、task、watch
- gulp.src(globs[, options])：指明源文件路徑
globs：路徑模式匹配勋颖；
options：可選參數(shù)嗦嗡；
- gulp.dest(path[, options])：指明處理后的文件輸出路徑
path：路徑（一個任務可以有多個輸出路徑）；
options：可選參數(shù)饭玲；
gulp.task(name[, deps], fn)：注冊任務
name：任務名稱（通過 gulp name 來執(zhí)行這個任務）侥祭；
deps：可選的數(shù)組，在本任務運行中所需要所依賴的其他任務（當前任務在依賴任務執(zhí)行完畢后才會執(zhí)行）茄厘；
fn：任務函數(shù)（function方法）矮冬；gulp.watch(glob [, opts], tasks)：監(jiān)視文件的變化并運行相應的任務
glob：路徑模式匹配；
opts：可以選配置對象次哈；
taks：執(zhí)行的任務胎署；
在我使用Gulp后，就明顯感覺Grunt配置很是復雜窑滞。同樣為了實現(xiàn)LiveReload功能琼牧，Gulp所需要的配置的代碼恢筝，只有Grunt的一般都不到。具體可以參見我之前所寫的一篇文章《Grunt插件之LiveReload 實現(xiàn)頁面自動刷新巨坊，所見即所得編輯》與下文進行對比撬槽。
注：
1. streams（流）的簡述：Node.js中的I/O操作是異步的，因此磁盤的讀寫和網(wǎng)絡操作都需要傳遞回調(diào)函數(shù)趾撵。streams的優(yōu)點：不需要把文件都一次性寫入內(nèi)存侄柔，通過pie（管道）把文件轉(zhuǎn)為數(shù)據(jù)流（將任務和操作連接起來），像瀑布一樣一級級（one by one）往下流（處理）占调，因此只需一次I/O操作暂题。而Grunt是每執(zhí)行一個任務就需要I/O一次，在任務多的時候妈候，就會有大量I/O操作敢靡，效率自然就會比較低挂滓。
2. 以前Gulp有5個核心API苦银，但隨著Gulp 3.5的更新，gulp.run()方法早已被棄用赶站。
1. 安裝Node.js（Install Node.js）
1.1 首先去Node.js官網(wǎng)幔虏，點擊那個醒目的"INSTALL"按鈕，下載并安裝贝椿。
1.2 安裝完成以后想括，打開命令行（Winkey+R -> 輸入CMD）or（開始菜單 -> 所有程序 -> 選擇命令提示符），執(zhí)行以下2個簡單的命令烙博，查看Node.js是否已經(jīng)安裝正確：
node -v
查看 Node.js 版本號
npm -v
查看 npm 版本號
注：
現(xiàn)在的Node.js會自動安裝npm（npm 是 Node.js 的包管理器瑟蜈，Gulp和Gulp插件就通過 npm 安裝并管理）。
2. 創(chuàng)建項目目錄（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一樣掂林，只需安裝一次就能在任何目下執(zhí)行。他在每構(gòu)建一個新項目時坝橡，都需要從這步驟開始再單獨安裝一次泻帮。
2. 至于為什么要這樣，有人在stackoverflow上提出過疑問计寇。得到的大致回復是為了更加靈活刑顺，因為有些插件基于特定的版本氯窍，這樣做的話每個項目就等于都是獨立的，互不影響蹲堂。
3.2 本地安裝：
npm install gulp --save-dev
注：
1. -g：代表全局安裝狼讨；
2. --save：將保存配置信息至package.json（此文件在 node_modules\gulp 目錄下）
3. -dev：將它作為你的項目依賴添加到中devDependencies內(nèi)（--save和-dev是2個東西，記得分清前面的"-"號）
4. 由于Gulp會自帶package.json文件（用于存儲項目的元數(shù)據(jù)）柒竞，所以這里只做簡單介紹（如果你想自己創(chuàng)建政供，也可通過命令 npm init，然后根據(jù)引導填寫相關(guān)信息）：
{
"name": "gulp", // 模塊名稱：只能包含小寫字母數(shù)字和中劃線朽基，如果為空則使用項目文件夾名稱代替（必填）
"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": [{ // 開源協(xié)議
"type": "MIT",
"url": "https://raw.githubusercontent.com/gulpjs/gulp/master/LICENSE"
}],
"devDependencies": { // 這里面的參數(shù)布隔，指定了項目依賴的Gulp和Gulp插件版本。
"gulp": "^3.8.11"
}
}
4. Gulp插件安裝（Install Gulp Plugins）
接著安裝我們所需要的插件稼虎，這里衅檀，我們通過gulp-livereload + gulp-webserver，來實現(xiàn)頁面自動刷新：
靜態(tài)服務器（ gulp-webserver ）
網(wǎng)頁自動刷新（ gulp-livereload ）
npm install gulp-livereload gulp-webserver --save-dev
5. Gulp任務配置（Task Configuration）
5.1 在項目根目錄中霎俩，創(chuàng)建gulpfile.js文件哀军，用來配置和定義任務（task）。
5.2 打開Gulpfile.js文件中打却，填寫相關(guān)配置：
// 引入gulp
var gulp = require('gulp'); // 基礎庫
// 引入gulp插件
var livereload = require('gulp-livereload'), // 網(wǎng)頁自動刷新（服務器控制客戶端同步刷新）
webserver = require('gulp-webserver'); // 本地服務器
// 注冊任務
gulp.task('webserver', function() {
gulp.src( './' ) // 服務器目錄（./代表根目錄）
.pipe(webserver({ // 運行g(shù)ulp-webserver
livereload: true, // 啟用LiveReload
open: true // 服務器啟動時自動打開網(wǎng)頁
}));
});
// 監(jiān)聽任務
gulp.task('watch',function(){
gulp.watch( '*.html', ['html']) // 監(jiān)聽根目錄下所有.html文件
});
// 默認任務
gulp.task('default',['webserver','watch']);
5.2.1 執(zhí)行默認：
gulp
看到如下提示說明執(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
想要終止任務杉适，只需Ctrl+c根據(jù)提示輸入y便能終止，或直接關(guān)閉命令提示符柳击。
5.2.2 執(zhí)行特定任務：
grunt webserver
看到如下提示說明執(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
至此猿推，你已輕松學會如何使用Gulp，并對它有一個大致的了解捌肴。
注：
1. Gulp插件可以通過Gulp官網(wǎng) 蹬叭、 npm官網(wǎng) 或 Browsenpm 上找到你所要的插件。
2. 不要在node_modules文件夾內(nèi)手動刪除插件状知，請使用命令卸載秽五。因為手動刪除的只是下載插件包，但package.jason中的配置信息并沒有清除试幽。
3. 不要直接移動Gulp插件筝蚕，否則由于系統(tǒng)層級限制，出現(xiàn)錯誤提示“文件名對目標文件夾可能過長铺坞。您可以縮短文件名并重試起宽，或者嘗試路徑較短的位置〖谜ィ”坯沪。此時把文件夾打包成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
