gulp 和grunt一樣，都是任務自動管理工具，和grunt相比，gulp更加好用，配置也更加靈活。
1、安裝
gulp也是基於nodejs的，同樣可以通過npm安裝，
全局安裝
npm install -g gulp
在項目中安裝
npm install gulp --save-dev
2、兩個例子
創建名爲gulpfile.js,在這個文件中通過gulp命令定義gulp 任務，在gulpfile.js添加如下代碼：
var gulp =require('gulp'),
uglify =require('gulp-uglify');
gulp.task('minify',function(){
gulp.src('js/app.js').pipe(uglify()).pipe(gulp.dest('build'))
});需要先安裝gulp-uglify, 命令如下：
npm install gulp-uglify --save-dev
然後再該目錄下簡歷一個js目錄，在這個目錄下建一個app.js文件,鍵入內容：
function test(){
var info= "This is a gulp information"
return info.indexOf("gulp");
}這時候就可以看下 效果瞭然後再解釋其中的流程。命令如下：
gulp minify
稍等一下，會看到如下效果：
流程到底是什麼樣子的？我們先分析一下：
首先，先加載gulp和gulp-uglify插件，然後定義一個名字爲minify的task，當這個task被調用時，會運行第二個匿名方法。最後，方法中的代碼纔是真正要實現的功能，gulp是採用流的方式，從一個功能點流向另一個功能點。gulp.src()參數是一個字符串，指向一個或多個文件，它會創建一個指向文件的流對象，這些對象會被傳遞到uglify方法，返回一個包含壓縮代碼的文件對象，然後返回的對象傳遞給gulp.dest(),用來保存文件。
上面的例子是執行一個任務，如果是多個任務，先看下面的代碼：
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});運行之前，先安裝 gulp, gulp-jshint, gulp-uglify and gulp-concat. 上面的代碼分別進行jshint,uglify,concat處理。
3、方法解釋
(1)gulp.src()
這個方法主要產生數據流，參數是對應一個或者多個的字符串，一般有幾種形式：
js/app.js 完整匹配一個文件
js/*.js 匹配js目錄下的所有js文件
js/**/*.js 匹配js文件夾下的所有js文件，包括子文件夾
!js/app.js 除了js/app.js以外的所有文件
*.+(js|css)匹配根目錄下的js或者css文件
(2)定義task
使用gulp.tash()來定義一個task，當定義一個簡單任務時，這個方法接受兩個參數：task的名字和要執行的方法。
gulp.task('greet', function () {
console.log('Hello world!');
});還可以執行一系列的任務：
gulp.task('build', ['css', 'js', 'imgs']);build任務有三個任務組成，這三個任務都是異步執行的，所以無法保證js的任務在css任務執行完纔開始執行。要是想實現這樣的效果也不是不可能的，如果想在某個任務執行前執行某個任務，可以通過指定依賴的方式，例子說明：
gulp.task('css', ['greet'], function () {
// Deal with CSS here
});上面代碼的意思是，等task greet執行完纔開始執行task css。
(3)默認的task
gulp.task('default', function () {
// Your default task
});(4)監控文件
gulp也提供了監控文件內容變化的功能，當文件變化時運行一個或多個task，
gulp.task('watch', function () {
gulp.watch('templates/*.tmpl.html', ['build']);
});當templates目錄下的html文件變化時，會執行build任務。當然你也可以將上面的task改造一下，將事件對象event傳進去：
gulp.watch('templates/*.tmpl.html', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});gulp.watch()還有一個比較好的特性，就是返回一個watcher，使用watcher來註冊事件，看一個例子：
var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
watcher.on('change', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});當然除了change事件還有其他的事件:
end: 當文件變化後還沒有出發任何的回調函數
error：文件有錯誤
ready：文件被搜索到後，開始監視
nomatch：沒有匹配到任何文件
watcher還包含其他的方法：end()，files(), files(), add(), remove()
4 插件
1、gulp完整的插件可以訪問http://gulpjs.com/plugins/ 查看，在前面的例子中我們已經使用 gulp-jshint, gulp-uglify and gulp-concat插件，
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});如果gulp的插件很多，一個一個require進來還是挺麻煩的，像grunt一樣，gulp也有插件可以一次性加載所有的gulp plugins，即gulp-load-plugins：
var gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();當然也可以寫成一行，
var plugins = require('gulp-load-plugins')();這個插件也是從package.json中讀取gulp 插件的信息，假設package.json的devDependencies 字段中有各個插件的版本信息
{
"devDependencies": {
"gulp-concat": "~2.2.0",
"gulp-uglify": "~0.2.1",
"gulp-jshint": "~1.5.1",
"gulp": "~3.5.6"
}
}2、插件實例
gulp-livereload模塊用於自動刷新瀏覽器，反映出源碼的最新變化，但是要藉助瀏覽器插件
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload'),
watch = require('gulp-watch');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(watch())
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});參考：
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
https://github.com/gulpjs/gulp/blob/master/docs/API.md
https://github.com/vohof/gulp-livereload