Gulp 特點

1. 易於使用
2. 構建快速
3. 外掛高質量
4. 易於學習

安裝

1. 全域性安裝： npm install –global gulp
2. 作為專案開發依賴安裝： npm install –save-dev gulp

執行gulp

1. 在專案根目錄建立一個名為gulpfile.js的檔案
2. 使用gulp命令執行： gulp （執行預設的任務）

原理

在gulpfile.je或gulpfile.babel.js裡定義任務，通過gulp命令執行任務。

如何定義任務

gulpfile.js

import gulp from 'gulp'
gulp.task('css', ()=>{
    return
 
 gulp.src('app/**/*.css')//獲取原始檔的css檔案， 
        .pipe(gulp.dest('server/public'))//將css檔案原封不動的拷貝到server目錄去
})

scripts.js

import gulp from 'gulp'
import gulpif from 'gulp-if'
import concat from 'gulp-concat'
import webpack from 'webpack'
import gulpWebpack from 'webpack-stream'
import named from 'vinyl-named'
 

import livereload from 'gulp-livereload'
import plumber from 'gulp-plumber'
import rename from 'gulp-rename'
import uglify from 'gulp-uglify'

gulp.task('scripts', ()=> {
    return gulp.src(['app/js/index.js'])//開啟檔案
        .pipe(plumber({//錯誤處理
            errorHandler: function(){
            }
        }))
        .pipe(named())//
 
重新命名
        .pipe(gulpWebpack({
            module:{
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel-loader'
                }]
            }
        }), null, (err, stats)=>{
            log(`Finished ${color.cyan('scripts')}`, stats.toString({}
                chunks: false
            ))  
        })
        .pipe(gulp.dest('server/public/js'))
        .pipe(rename({
            basename: 'cp',
            extname: 'min.js'   
        }))
        .pipe(uglify({
            compress: {
                properties: false   
            },
            output:{
                'quote_keys': true
            }   
        }))//壓縮
        .pipe(gulp.dest('server/public/js'))
        .pipe(gulpif(args.watch, livereload()))//當檔案改變了以後自動重新整理： 使用gulpif做判斷， 執行livereload()
})

以上寫了兩個檔案， 分別定義了css任務， 和scripts任務。 其中scripts任務可以通過模組引入到gulpfile.js中。

注意：

從以上程式碼可以看出， 使用gulp.task 定義任務；在任務的回撥中， 返回這個任務是怎麼操作的。

任務基本流程是：

1. 使用的gulp.src()獲取我們要處理的原始檔
2. 使用pipe()方法依次給原始檔做相應處理
3. 使用gulp.dest()方法將原始檔輸出

多說一句

gulp中的每個任務，以流的形式處理原始檔檔案。 可以比作水管，水管中流的水就是我們的原始檔， 用gulp.src方法將我們的原始檔流入到水管中， pipe就好比水管中的節點， 在節點處我們可以截獲水流， 並做一些我們想要做的事，gulp中一般使用第三方外掛來做該處理， gulp.dest就是水管的出口

gulp API

1. gulp.src(globs[, options])

   輸出符合所提供的匹配模式或匹配模式的陣列的檔案。 將返回一個vinyl files的stream它可以被piped到被的外掛中
   

2. gulp.dest(path[, options])

   能被pipe進來， 並將會寫檔案。 並且重新輸出所有資料， 因此你可以將它pipe到多個資料夾。 如果不存在， 將會自動建立它。 
   gulp.src('./client/templates/*.jade')
       .pipe(jade())
       .pipe(gulp.dest('./build/template'))
       .pipe(minify())
       .pipe(gulp.dest('./build/minified_templates'))
   

3. gulp.task(name[, deps], fn)

   定義一個使用Orchestrator實現的任務（task）
   gulp.task('somename', function(){
       //做一些事
   })
   deps： 型別Array
   一個包含任務列表的陣列， 這些任務會在你當前任務執行之前完成
   gulp.task('mytask', ['array', 'of', 'task', 'name' ], function(){
       //做一些事  
   })
   

4. gulp.watch(glob[, opts], tasks)或者gulp.watch(glob[, opts, cb])

   監聽檔案， 並且可以在檔案發生改動時候做一些事。 它總會返回一個EventEmitter來發射(emit)change事件。
   

gulp常用外掛

1. gulp-if //有條件的執行一個任務
2. gulp-live-server
3. gulp-concat //合併檔案
4. webpack
5. webpack-stream
6. vinyl-named
7. gulp-rename //重新命名檔案
8. gulp-sequence
9. del //刪除dest檔案
10. gulp.filter//在虛擬檔案流中過渡過濾檔案
11. gulp-uglify//壓縮js檔案大小
12. gulp-csso //壓縮優化css
13. gulp-html-minify//壓縮html
14. gulp-imagemin//壓縮圖片
15. gulp-zip//zip雅座檔案
16. gulp-autoprefixer//自動為css新增瀏覽器字首
17. gulp-sass//編譯sass
18. gulp-babel//將ES6編譯為es5