Gulp 上手指南
原文 http://segmentfault.com/a/1190000003866363
導讀：有關Gulp的入門教程很多，大同小異。本文主要對它們進行內容上的梳理和引導。
What is Gulp?
對網站資源進行優化，并使用不同瀏覽器測試并不是網站設計過程中最有意思的部分，但是這個過程中的很多重復的任務能夠使用正確的工具自動完成，從而使效率大大提高，這是讓很多開發者覺得有趣的地方。
Gulp 是一個構建系統，它能通過自動執行常見任務，比如編譯預處理 CSS，壓縮 JavaScript 和刷新瀏覽器，來改進網站開發的過程。Gulp 是基于 Node.js 構建的，因此 Gulp 源文件和你用來定義任務的 Gulp 文件都被寫進了 JavaScript（或者 CoffeeScript）里。前端開發工程師還可以用自己熟悉的語言來編寫任務去 lint JavaScript 和 CSS、解析模板以及在文件變動時編譯 LESS 文件（當然這些只是一小部分例子）。
Gulp vs Grunt
Grunt 的特點
-
Grunt 有一個完善的社區，插件豐富
-
它簡單易學，你可以隨便安裝插件并配置它們
-
你不需要多先進的理念，也不需要任何經驗
Gulp 和 Grunt 的異同點
-
易于使用：采用代碼優于配置策略，Gulp 讓簡單的事情繼續簡單，復雜的任務變得可管理
-
高效：通過利用 Node.js 強大的流，不需要往磁盤寫中間文件，可以更快地完成構建
-
高質量：Gulp 嚴格的插件指導方針，確保插件簡單并且按你期望的方式工作
-
易于學習：通過把API降到最少，你能在很短的時間內學會 Gulp，構建的工作就像你預想的一樣：是一系列流管道。
Grunt 之殤
-
插件很難遵守單一責任原則
-
用插件做一些本來不需要插件來做的事情
-
試圖用配置文件完成所有事，結果就是混亂不堪
-
落后的流程控制產生了讓人頭痛的臨時文件/文件夾所導致的性能滯后
Gulp 之道
-
使用 Gulp，你的構建腳本是代碼，而不是配置文件
-
使用標準庫（node.js standard library）來編寫腳本
-
插件都很簡單，只負責完成一件事（基本上都是20行左右的函數）
-
輸入 / 輸出（I/O）是基于“流式”的
Getting Started
第一步：安裝Node
]
第二步：使用命令行
為了確保 Node 已經正確安裝，可通過查看版本號來檢驗，如下。
node -v npm -v
第三步：定位到項目
Linux、OSX的終端（Terminal）
cd 定位到目錄 ls 獲取文件列表
Windows中的命令提示符（Command Prompt）
定位到目錄
盤符: 例如進入D盤 d: cd 進入當前盤符某個目錄 cd \ 進入當前盤根目錄 cd \windows 進入當前盤windows目錄 cd .. 退到上一級目錄
（注：進入含有特殊字符目錄時需要加引號。例如：cd "c:\program files"。）
獲取文件列表
dir /b
成功進入項目目錄后，我們開始安裝Gulp。
第四步：安裝 Gulp
NPM 是基于命令行的 node 包管理工具，它可以將 node 的程序模塊安裝到項目中，，在它的 官網 中可以查看和搜索所有可用的程序模塊。
在命令行中輸入
sudo npm install -g gulp
說明：
-
sudo是管理員身份執行命令，一般會要求輸入電腦密碼
-
npm是安裝 node 模塊的工具，執行 install 命令
-
-g表示在全局環境安裝，以便任何項目都能使用它
-
最后，gulp是將要安裝的 node 模塊的名字
運行時注意查看命令行有沒有錯誤信息，安裝完成后，可以使用下面的命令查看 gulp 的版本號以確保gulp已經被正確安裝。
gulp -v
接下來，我們需要將gulp安裝到項目本地
npm install --save-dev gulp
說明：
-
使用--save-dev來更新 package.json 文件，更新devDependencies值，以表明項目需要依賴gulp；
-
dependencies可以向其他參與項目的人指明項目在開發環境和生產環境中的 node 模塊依賴關系。想要深入了解可以查看 package.json 文檔 。
第五步：新建 Gulpfile 文件，運行 Gulp
安裝好 gulp 后我們需要告訴它要為我們執行哪些任務。所以，我們首先需要弄清楚項目需要哪些任務。例如：
-
檢查JavaScript（gulp-jshint）
-
合并JavaScript(gulp-concat)
-
壓縮并重命名合并后的JavaScript(gulp-ugligy、gulp-rename)
1.安裝依賴
根據上面的任務需求，我們安裝相應的插件。
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
2.新建gulpfile文件
插件安裝完畢后，我們需要新建一個gulpfile.js文件來指定gulp需要為我們完成什么任務。
3.引入插件
// 引入 gulp
var gulp = require('gulp');
// 引入插件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); 4.創建任務
// 語法檢查
gulp.task('jshint', function() {
gulp.src('project/src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件之后壓縮代碼
gulp.task('minify', function(){
gulp.src('project/src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('project/dist/js'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('project/dist/js'))
});
// 監視文件的變化
gulp.task('watch', function(){
gulp.watch('project/src/js/*.js', ['jshint', 'minify']);
});
// 默認任務
gulp.task('default', ['jshint', 'minify', 'watch']);
5.運行gulp
回到命令行，就可以直接運行gulp任務了。
gulp
這將執行定義的default任務，即跟下面的命令作用相同。
gulp default
當然，我們可以運行gulpfile.js中定義的任意任務，比如，現在運行scripts任務：
gulp minify
More
以上，歡迎拍磚斧正。