gulp是基於流的前端自動化構建工具。
之前也談到了 grunt的用法，grunt其實就是配置+配置的形式。
而gulp呢，是基於stream流的形式，也就是前一個函數（工廠）制造出結果，提供后者使用。
同樣的，也是包括基本用法和各插件的使用。
一、環境配置
gulp是基於nodejs的，所以沒有 nodejs 環境的要先去安裝好
然后給系統配上gulp環境
npm install -g gulp
再到某一工程目錄下
跟grunt一般，也是需要package.json包依賴文件和一個入口文件 gulpfile.js(其他名字識別不了）
然后就類似的先裝上gulp
npm install gulp --save-dev
最基本的使用方式是這樣：(使用jshint插件校驗js代碼）
var jshint = require('gulp-jshint'); gulp.task('myTask',function(){ return gulp.src('main.js') .pipe(jshint({undef: true})); });
然后命令行使用：gulp myTask 即可運行此程序。
二、基本用法--插件使用
gulp所支持的插件也是很多的，使用方式跟基本的nodejs差不多。
下面統一介紹幾個常見的 插件，更詳細用法可以到對應官方站點查看API
- sass的編譯（gulp-ruby-sass）
- 自動添加css前綴（gulp-autoprefixer）
- 壓縮css（gulp-minify-css）
- js代碼校驗（gulp-jshint）
- 合並js文件（gulp-concat）
- 壓縮js代碼（gulp-uglify）
- 壓縮圖片（gulp-imagemin）
- 重命名（gulp-rename）
- 自動刷新頁面（gulp-livereload）
- 圖片緩存，只有圖片替換了才壓縮（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
使用它們，就要先install,可以直接在package.json中直接配置devDependencies依賴項，然后再統一 npm install
或者一個一個地安裝，依賴項會自動建立。比如安裝壓縮css的依賴包：
npm install gulp-minify-css --save-dev
這里直接把所以依賴全支持上，因為都要用到。
然后進入 gulpfile.js文件，先直接require
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), del = require('del');
然后，新建一個任務：
gulp.task('styles',function(){
return sass('static/style/test.scss',{style: 'expanded'})
.pipe(autoprefixer('last 2 version','safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('static/style'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'style done!'}));
});
解釋一下，其實就是 將sass文件編譯成css，以流的形式pipe結果，再加css前綴，修改后綴為.min.css，並作資源壓縮，最后成功后返回done的消息
命令行鍵入 gulp styles 成功的話看到done信息，相應css文件也順利產生。
原本打算直接用src的形式，沒料到會出錯，難道是 gulp-ruby-sass 不支持這種寫法？
再試一下 js的
gulp.task('scripts',function(){
return gulp.src('./static/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('./static/script'))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'script done!'}));
});
當然，現在有兩個任務了，直接gulp [task]未免太麻煩
命令行 gulp默認執行的是default的任務
所以可以這么玩：
gulp.task('default',['watch'],function(){
gulp.start('styles','scripts');
});
解釋一下，第一個參數是任務1（不一定非得default)，第二個參數也是任務（這個任務可以為空，代表着任務一依賴它（們），任務一執行完才輪到它，當然了，其實我現在這個順序好像有點..）
這個watch是一個監聽的任務，下頭會講到
然后gulp.start 再執行上述的那兩個任務。
這樣一來，命令行直接gulp就能執行這仨任務了，還能實時監聽改變哦~
這個watch的監聽任務：
gulp.task('watch',function(){
gulp.watch('./static/style/test.scss',['styles']);
livereload.listen();
gulp.watch('./build/static/test.min.css').on('change',livereload.changed);
});
解析：第二行是指監聽那個scss文件，如果有改動就執行styles的那個任務
第三行是開啟瀏覽器端的監聽模式
第四行是監聽某個css文件，比如我html文件引用了這個文件，它變化時瀏覽器就會自動刷新。
ps: 不過默認情況下可能還是無法監聽的，有兩種方法：
裝上 liveReload 插件(比如chrome上）
給html代碼添加上：參考
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
如果是遠程機子，非本地的，例如： 參考
<script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
ok 整個運行一下吧！
shenmegui .. console.log都識別不了，不管了..忽略
不過為什么jshint出錯了還會繼續下面的操作呢？看了還得截斷一下才行
還有圖片的壓縮imagemin插件
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
以及clean插件的使用等：
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
當然，gulp任務的執行是異步的，也就是說，任務之間的執行沒有先后之分，若想保證執行順序
只好定義依賴關系（如上述參數二的依賴）
或者使用Promise對象實現，回調函數的使用，參考
更多的操作還需到各自插件API查看
總之，gulp比grunt簡潔了許多，但因為是基於流的形式，不免又會帶來“一些麻煩”。