Grunt是目前最流行的前端建構工具，對前端的效率幫助非常大，但Grunt并非完美無缺，json描述任務的方式，顯得過于繁瑣和不夠簡單，對于新手來說，有不少的學習成本。
今天明河介紹個比Grunt更易用的前端建構工具：Gulp.js，最近很火的開源項目，引起了很多前端同學的關注，大家都很好奇，Gulp.js拿什麼跟Grunt掰手腕。
大多數前端處于觀望狀态，Gulp.js這杯可樂很誘人，但第三方插件太少（常用的任務插件都有），被Grunt甩了N條街，當然畢竟是新工具，情有可原，相信假以時日，Gulp.js會被更多前端同學認可，明河希望通過這篇文章，能夠讓大家看到Gulp.js的潛力。
安裝Gulp.js
Gulp.js跟Grunt一樣基于Node.js，使用npm安裝即可：
npm install -g gulp
想要使用Gulp.js建構您的工程，需要在工程目錄中安裝Gulp.js的依賴
npm install --save-dev gulp gulp-util
–save-dev 指令配置，可以自動在工程目錄的package.json檔案内生成包依賴資訊，比如：
{
"devDependencies": {
"gulp-util": "~2.2.14",
"gulp": "~3.5.2"
}}
（如果項目工程中沒有package.json，請運作npm init。）
在工程根目錄下建立個gulpfile.js檔案，内容如下：
var gulp = require('gulp');var gutil = require('gulp-util');gulp.task('default', function(){
// place code for your default task here});
使用gulp指令，運作Gulp.js建構程式：
gulp
表示運作default（預設任務）成功。
接下來看個具體的demo。
簡單使用說明
假設demo工程目錄結構如下：
我們建構的目标是壓縮src目錄下的a.js和b.js，合并生成all.min.js放在build目錄下。
安裝插件
npm install --save-dev gulp-uglify gulp-concat
gulp-uglify：用于壓縮js
gulp-concat：用于合并檔案
Gulp.js目前提供了300多個插件，基本可以滿足主流前端建構需求。
編寫Gulpfile.js建構腳本
完整代碼：
var gulp = require('gulp');var gutil = require('gulp-util');var uglify = require('gulp-uglify');var concat = require('gulp-concat');gulp.task('concat', function () {
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));});gulp.task('default', ['concat']);
運作gulp指令後：
生成了all.min.js。
接下來來看下上述代碼的含義。
首先require需要的插件：
var uglify = require('gulp-uglify');var concat = require('gulp-concat');
使用gulp.task()定義一個任務目标：
gulp.task('concat', function () {
//...});
第一個參數為任務名。
gulp.task()傳回值為一個stream，stream的使用是Gulp.js的核心，也是Gulp.js與Grunt的最重要差別，Gulp.js充分利用了Node.js的Streams API，關于流的概念下一篇進階篇會講解到。
當第二個參數為數組時，表明此任務存在依賴任務，會運作完依賴任務後，才執行該任務，比如：
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// Do stuff});
gulp.src()任務處理的目标檔案，傳回的是stream，請把gulp看成礦泉水廠（想起了恒大冰泉-_-!），檔案資料了解為水流，這裡相當于閥門打開，水開始順着管道（每個任務可以了解為一段管道）流去，然後經過各個插件的加工過濾，最後罐裝到水瓶裡面。
.pipe() 是stream的核心方法，不是gulp的方法哦，第一個參數為插件方法，插件會接收從上遊流下的檔案，進行處理加工後，再往下流。
.pipe(uglify())
壓縮檔案
.pipe(concat('all.min.js'))
将壓縮後的檔案合并成all.min.js，這裡留意，不需要目錄路徑，stream流過來的就是檔案資料，隻要提供檔案名即可。
.pipe(gulp.dest('./build'))
gulp.dest()：用于指定檔案輸出位置，第一個參數為目錄路徑。
最後運作任務：
gulp.task('default', ['concat']);
gulp指令預設執行default任務，等于gulp default。
總結
gulp的簡單使用先介紹這裡，下一篇明河将深入講解gulp的細節，同時指明Gulp.js為什麼比Grunt來得優秀。
7
轉載于:https://my.oschina.net/lee2013/blog/301624