Gulp是基於流的前端自動化構建工具

使用步驟：

1.安裝node和npm

　　訪問國外伺服器網速不好時，安裝依賴模塊時會缺少文件。可以安裝國內的鏡像，之後使用cnpm命令代替npm命令。

　　npm install cnpm -g --registry=https://registry.npm.taobao.org

2.全局安裝gulp

　　$npm install -g gulp

　　查看gulp的版本：$gulp –v

　　結果：cli version -3.0.2為全局安裝，local version-3.0.2 為本地安裝。

3.在項目根目錄新建package.json文件

　　$npm ini

　　按提示輸入相關配置信息即可

4.本地安裝gulp

　　$npm install gulp  --save-dev

　　$npm install [<@scope>/]<name>@<version>

　　卸載插件：npm uninstall <name> [-g] [--save-dev];(直接刪除文件會報錯)

5. 安裝gulp的相關插件

　　$npm install module-name -save 自動把模塊和版本號添加到package.json的dependencies部分

　　$npm install gulp-less -save-dve自動把模塊和版本號添加到package.json的devdependencies部分

6. 編寫gulpfile.js文件定義執行的任務

　　在項目根目錄下創建gulpfile.js文件，裡面定義需要執行的任務。同時新建一個發佈目錄，和開發目錄分開，專門存放處理好的靜態資源，將來發佈時直接將發佈目錄下的所有文件拷到伺服器即可。

7.運行gulf任務

　　CLI執行方式，預設執行gulpfile.js中的任務：$gulp  defaultTask

　　如果任務不在項目根目錄的gulpfile.js中定義，需要手動指定gulpfile的路徑，如下所示：

   $gulp  minifyCssTask  --gulpfile  ./child/task.js

　　webstorm開發工具中：右鍵點擊gulpfile.js，選擇”Show Gulp Tasks”

常用命令：

$npm install gulp –g

安裝到全局環境裡面，包安裝在Node安裝目錄下的node_modules文件夾中，一般在 \Users\用戶名\AppData\Roaming\ npm\目錄下，可以使用npm root -g查看全局安裝的目錄。用戶可以在命令行中直接運行該模塊包支持的命令。

$npm install gulp --save-dev

包安裝在指定項目的node_modules文件夾下，--save將配置保存到配置文件中，-dev同時把配置寫入devDependencies欄位中。

gulp常用方法

1. gulp.src(globs[, options])
src方法是按照指定的路徑將源文件轉為Vinyl fs並輸出至別的插件。gulp借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，類似jQuery的鏈式操作。當前Node項目的根路徑用’./’表示，或者直接從和gulpfile.js平級的目錄開始，’/’表示的是盤符根目錄。

globs：匹配符合特定規則的文件路徑，類型為字元串或字元串組成的數組。

glob匹配規則：

*：匹配0個或多個字元，但不會匹配路徑分隔符，除非路徑分隔符出現在末尾。*結尾時可以匹配到路徑分隔符不會被匹配到

    "js/*.js"：獲取js目錄下的所有js文件；

 "js/*"：獲取js目錄下的所有文件，不能匹配子目錄下的文件。

**：可以匹配路徑分隔符，用於匹配0個或多個子目錄，需要單獨出現。如果出現在末尾，還能匹配任意文件。

　　"js/**/*.js"：匹配 js 目錄及子目錄下所有js文件，如 js/a.js 或 js/a/b/c/d.js。

? ：匹配文件路徑中的一個字元，不會匹配到路徑分隔符，也不能匹配空字元

　　"js/a?.js"：能匹配 js/ab.js，不能匹配 js/a.js。

[...]：匹配指定範圍內的一個字元，如果指定範圍的首字元是 ! 或 ^，則為匹配不在指定範圍內的一個字元。

　　"js/a[0-3].js"：獲取js目錄下以a開頭，第二個字元為0-3之間的js文件。

　　"js/[^ab].js"：匹配 js/c.js，不匹配 js/cb.js、js/ac.js。

!(pattern|pattern|pattern) ： 匹配（完全且精確地匹配，且不可組合）不符合任何模型之一的字元。註意 | 前後不能有空格，下同。

　　"js/!(a|b).js"：匹配 js 目錄下的 aa.js、ab.js、ba.js、c.js 不匹配 a.js、b.js。

　　"!src/a.js" : 不包含src下的a.js文件；

?(pattern|pattern|pattern)：匹配多個 pattern 中 0 或 1 個（精確匹配，不可以組合）。

　　"js/?(a|b).js"：匹配 js 目錄下的 a.js、b.js，不匹配 ab.js

+(pattern|pattern|pattern) ： 至少匹配多個 pattern 中的一個。與*(pattern|pattern|pattern) 不用的是，它必須1個及以上，不能為空。

　　"js/+(a|b)b.js"：匹配 js 目錄下的 ab.js、bb.js、ababab.js，不能匹配 abcd.js（也就是說：只允許匹配出現在範圍內的字元） ，也不能像 js/*(a|b)b.js 那樣匹配 b.js。

*(a|b|c) ： 匹配括弧中多個 pattern 中0或任意多個（pattern可相互組合）。

　　"js/*(a|b|c).js"：匹配 js 目錄下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是說：只允許匹配出現在範圍內的字元）。

@(pattern|pattern|pattern) 匹配多個 pattern 中的任意一個（即不可以組合，且不能為空或大於1個）。與 ?(pattern|pattern|pattern) 區別是不可為空。

　　"js/@(a|b)b.js"：匹配 js 目錄下的 ab.js、bb.js，不匹配 b.js、abb.js、abc.js。

{}：匹配多個屬性

　　src/{a,b}.js匹配a.js和b.js文件，src/*.{jpg,png,gif}匹配src下所有jpg/png/gif文件

!：排除文件，當有多種匹配模式時可以使用數組，註意先後順序，後面的規則會覆蓋前面的。

　　gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b開頭的js文件

options： 控制文件流和輸出路徑，可選配置。

options.buffer：是否以buffer形式返回file.content，預設是true。

options.read：是否讀取該文件，fals返回的file.content為null，預設為true。

options.base：用於切除輸入流的路徑，base指定的部分路徑將不作為dest的輸入路徑，base預設值為第一個glob規則之前的所有路徑。

gulp.src('client/js/**/*.js') // `**/*.js`為glob規則，預設的base為`client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  //輸出'build/somedir/somefile.js'，base部分client/js/被省略
 
gulp.src('client/js/tools/helper.js') // `helper.js`為glob規則，預設的base為client/js/tools/
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/helper.js'
//如果要保留之前的目錄結構，使用{base:’.’},輸出build/client/js/tools/helper.js`
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 輸出'build/js/somedir/somefile.js'

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

dest方法將操作完成後的文件流輸出到指定目錄。可以pipe到多個文件夾，如果某個文件夾不存在，會自動創建它。只能指定路徑，不能指定文件名。文件名採用源文件的名字。

文件被輸出的路徑是以dest()所給的目標路徑根據src()相對路徑計算而來，src()的base參數會改變輸出路徑。

path： 指定文件的輸出路徑，參數類型為字元串或函數。當前項目根目錄以’./’表示。

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

task定義一個gulp任務

name： 指定任務的名稱，參數類型為String，名字中不要有空格，將來可以直接運行；

deps：  該任務依賴的任務（被依賴的任務需要return當前任務的事件流），[String]

fn： 執行該任務的具體操作，如果省略，則只完成依賴的任務。fn通常為調用對應插件的方法，不一定在所有依賴的任務完成後才執行，格式如下：

gulp.task('buildStuff', [‘taskOne’,’taskTwo’],function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));
  return stream;      //返回才能有先後順序，否則為並行    
　　//taskOne/taskTwo的fn方法中需要返迴流對象/Promise對象或使用cb，併在deps中聲明，才能保證當前的操作在依賴的任務完成後執行
  });

deps為多個任務時，預設的gulp會一次性同時運行所有的task並且不做任何等待，執行的順序沒有保證。如果需要嚴格按照順序執行，需要特別處理（如上所述，前一個任務返回特定對象並當前任務聲明依賴前一個任務）。

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

watch方法是用於監聽指定文件的變化，文件一修改就會執行指定的任務或回調函數
glob：需要處理的源文件通配符路徑。

opts：類型(可選)：Object 具體參看https://github.com/shama/gaze；

tasks：需要執行的任務的名稱數組；

cb(event)：文件變化時執行的回調函數，event對象描述了所監控到的變動

event.type：發生的變動的類型：added, changed 或者 deleted。

event.path：觸發了該事件的文件的路徑。

gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event) {

  console.log('File ' + event.path + ' was ' + event.type);

});

Node的stream有4種，Readable（只讀）、Writable（只寫）、Duplex（雙向）、Transform（操作被寫入數據，然後讀出結果）。但是Node的stream只處理內容，沒有辦法處理目錄相關的操作。所以gulp使用的是Vinyl File Object Stream，Vinyl主要用路徑（path）和內容（contents）兩個屬性來描述文件。

可以用vinyl-source-stream把普通的Node Stream轉換為Vinyl File Object Stream，在gulp內使用。

//引入工具包
var gulp = require('gulp'); //載入本地gulp
var jshint = require("gulp-jshint");    //js代碼檢查
var less = require("gulp-less");    //編譯less文件生成css文件
var cssMinify = require('gulp-clean-css');  //壓縮css文件
var concat = require("gulp-concat");//將多個js文件合併為一個
var uglify = require("gulp-uglify");//將js文件壓縮，如果js有語法錯誤，任務會終止
var rename = require("gulp-rename");//將文件重命名，參數為String/fn，可以在文件名前配置輸出路徑
var del = require("del");   //刪除文件，原生的Node模塊，也需要install
//在編譯文件之前刪除上次一些不必要的文件，如上次build的temp文件等
gulp.task('clean:mobile', function (cb) {   //cb是gulp傳入的回調函數
  del([
    './src/mobile/**/*',    // 刪除`mobile`目錄中的所有文件及目錄；若以文件尾碼結尾，目錄會保存
    '!./src/mobile/deploy.json'  // 不希望刪掉的這個文件
  ], cb);
});
//編譯less，壓縮css
gulp.task('less', function () {
    gulp.src("./src/less/**/*.less")   
        .pipe(less())   //調用less模塊，將less文件編譯為css文件，文件名不變
        .pipe(cssMinify(
              {
　　　　　　　　　　compatibility: 'ie9,-properties.ieFilters', //相容ie9以上，不保留濾鏡
                 debug:true
               },
               function (detail){
               　　console.log(details.name + ': ' + details.stats.originalSize);
                  console.log(details.name + ': ' + details.stats.minifiedSize);
　　　　　　　　 }
　　　　　　))  //將css文件壓縮
        .pipe(gulp.dest("./build/css"));    //輸出目錄
});
//檢查腳本語法
gulp.task('jshint', function () {
    return gulp.src('./src/js/**/*.js')
            .pipe(jshint())     //檢查js語法
            .pipe(jshint.reporter('default'));  //對錯誤進行提示
});
//合併js，並壓縮
gulp.task('scripts',['jshint'], function () {
    gulp.src('./src/js/**/*.js')
        .pipe(concat('all.js'))     //合併後的文件名字
        .pipe(gulp.dest('./dest'))  //合併後的輸出目錄
        .pipe(rename("all.min.js"))     //將文件重命名
        .pipe(uglify().on('error', function(e){console.log(e);}))           //壓縮問價。添加error事件，如果報錯，可以縮小查找範圍
        .pipe(gulp.dest("./build"))
});
//default執行全部依賴的任務
gulp.task('default',['clean:mobile','less','scripts']);