摘要：前兩者定位是工具，則是種模塊化解決方案。這四個都是模塊化的方案。類型默認值如果該項被設置為，那么將會以方式返回而不是文件的形式。整個工程壓縮完需要分鐘以上，使用緩存后只需要秒鐘。

gulp是什么？

一個自動化構建工具，基于nodejs的自動任務運行器。

為什么要使用它？

易于使用，易于學習。它能自動化地完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

和grunt、webpack的區別

gulp和grunt非常類似，但相比于grunt的頻繁IO操作，gulp的流操作，能更快地更便捷地完成構建工作。前兩者定位是工具，webpack則是種模塊化解決方案。

說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另一種類型。

seajs / require : 是一種在線"編譯" 模塊的方案，相當于在頁面上加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模塊化。

browserify / webpack : 是一個預編譯模塊的方案，相比于上面 ，這個方案更加智能。

gulp也能調用webpack。

為什么要用4.0？

組合任務。

比如以前的gulp對多個異步任務很難控制，必須借助于第三方模塊，如run-sequence、event-stream等，效果也并不理想。

現在gulp帶來了兩個新的api：gulp.series【順序】和gulp.parallel【并行】，這兩個革命性的api將幫助開發者解決惱人的任務流程控制問題。

  //clear任務執行完后，才會執行copy
gulp.task("build",
  gulp.series("clear","copy")
 );

//inject:home和inject:list這2個任務同時執行
 gulp.task("inject-all",
  gulp.parallel("inject:home",
    "inject:list"
  )
 );

小技巧：一個任務中需要立即執行一下任務，以前版本有gulp run XX，新的沒有，但可以這樣：

gulp.parallel("XX")();
gulp.series("XX")();

支持異步任務

有3種方式確認gulp能夠識別任務何時完成。后2者重要是return

回調

返回一個流

返回一個Promise

更多參見這篇文章：http://codecloud.net/10666.html

npm包管理

包管理主要在根目錄下的 package.json文件。
scripts中是一些npm的任務，npm run dev 即可執行。

dependencies是項目中必須的包，目前我們沒有用到，只有個vue。
devDependencies是開發所用的包，發布到生產環境不需要的都放在這里，平時安裝時需要用npm install -save-dev XX，可簡寫作npm i -D XX。

同時安裝多個包可以這樣：npm install -save-dev aa bb。或者將包復制到package文件里，直接在根目錄命令行里npm i或npm install。

包的版本：如"vue": "^2.0.1"

一個完整的版本號組表示為： [主要版本號，次要版本號，補丁版本號]
~會匹配最新的子版本（中間那個數字），比如~1.2.3會匹配所有的1.2.x版本，但不匹配到1.3.0及以上
^會匹配最新的主版本（第一個數字），比如^1.2.3將會匹配所有的1.x.x版本，2.0.0就緩緩飄過了。

怎么安裝

全局：npm i gulp -g

工程內部：npm i -D gulp

工程根目錄下創建gulpfile.js，它是配置文件。一個任務類似gulp.task("a",function(){});

在webstorm中右鍵gulpfile.js 選擇Show Gulp Tasks打開Gulp窗口，雙擊任務a即可。

或者在命令行中，輸入gulp a

幾個API gulp.src(globs[, options])

輸出符合所提供的匹配模式或者匹配模式的數組的文件。將返回一個流，它可以被 pipe 到別的插件中。

gulp.src("client/templates/*.jade")
 .pipe(jade())
 .pipe(minify())
 .pipe(gulp.dest("build/minified_templates"));

globs可以是字符串，也可以是數組，相對路徑或絕對路徑都可以。舉個例子：

         ["src/**/*.html", "!src/*.html", "src/play.html"]

表示目標是src下所有的html文件，但不包括根目錄的html文件，卻要包含根目錄下play.html。

options：通過 glob-stream 所傳遞給 node-glob的參數，可傳可不傳。

options.buffer 類型： Boolean 默認值： true

如果該項被設置為 false，那么將會以 stream 方式返回 file.contents 而不是文件 buffer的形式。這在處理一些大文件的時候將會很有用。

options.read 類型：Boolean 默認值： true

如果該項被設置為false，那么file.contents會返回空值（null），也就是并不會去讀取文件。只獲取文件路徑，不需要讀取內容時有用。

options.base

舉個例子感受一下，比如一個路徑為 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

 gulp.src("client/js/**/*.js") // 匹配 "client/js/somedir/somefile.js" 并且將 `base` 解析為 `client/js/`
    .pipe(minify())
    .pipe(gulp.dest("build"));  // 寫入 "build/somedir/somefile.js"

gulp.src("client/js/**/*.js", { base: "client" })
    .pipe(minify())
    .pipe(gulp.dest("build"));  // 寫入 "build/js/somedir/somefile.js"

gulp.dest(path[, options])

能被 pipe 進來，并且將會寫文件。并且重新輸出（emits）所有數據，因此你可以將它 pipe 到多個文件夾。如果某文件夾不存在，將會自動創建。

path 類型： String or Function

文件將被寫入的路徑（輸出目錄）。也可以傳入一個函數，在函數中返回相應路徑

options 類型： Object

options.cwd 類型： String 默認值： process.cwd()

輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

options.mode 類型： String 默認值： 0777

八進制權限字符，用以定義所有在輸出目錄中所創建的目錄的權限。

gulp.watch(glob[, opts])

舊版本有個參數回調，比如：

gulp.watch("js/**/*.js", function(event) {
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});

將變為：

  var watcher = gulp.watch("js/**/*.js" /* 你也可以在這兒傳入一些選項與/或一個任務函數 */);
watcher.on("all", function(event, path, stats) {
  console.log("File " + path + " was " + event + ", running tasks...");
});

或監聽多帶帶的事件類型，基本的3種：增、刪、改

watcher.on("change", function(path, stats) {
  console.log("File " + path + " was changed, running tasks...");
});

watcher.on("add", function(path) {
  console.log("File " + path + " was added, running tasks...");
});

watcher.on("unlink", function(path) {
  console.log("File " + path + " was removed, running tasks...");
});

基本插件

引用文件夾：require-dir

壓縮js：gulp-uglify

有細節可以配置

 uglify({
  compress: {
    drop_console:true, //刪除console，默認false
    drop_debugger: false//忽略debugger，默認true
  }
 }

合并js：gulp-concat

壓縮圖片：gulp-imagemin

壓縮html：gulp-htmlmin

壓縮css：gulp-clean-css

壓縮成zip包：gulp-zip

明星插件

簡化書寫gulp插件：gulp-load-plugins

var $ = require("gulp-load-plugins")();
gulp.src("from")

.pipe($.if(condition,$.uglify())//去除前面的"gulp-"
.pipe($.cleanCss())//原來名字叫gulp-clean-css，以駝峰形式使用
.pipe(gulp.dest("dist"));

重命名：gulp-rename

gulp.src("from").pipe(uglify())

.pipe(rename("XX"))
.pipe(gulp.dest("dist"));

條件：gulp-if

返回為true,調用后面的方法，其它不用。適用于既不愿意壓縮或其它，但又必要將文件復制到指定目錄的情況。

gulp.src("from")
    .pipe(if(function(file){
        if (file.path.endsWith(".min.js")) {
          return false;
        }
        return true;
    },uglify()))
.pipe(gulp.dest("dist"));

緩存：gulp-cache

非常有用，會將方法執行的結果緩存起來，當文件改變后，會重新執行方法，其它文件依然直接從緩存中讀取結果。整個工程壓縮完js需要2分鐘以上，使用緩存后只需要1秒鐘。js、css、圖片這些大件耗時的都要用到。

注意：方法配置修改以后，緩存就沒用了，需要手動刪除緩存文件夾

gulp.src("from")
    .pipe($.cache($.uglify(), {
      fileCache: new Cache({
        "cacheDirName": "test",//緩存文件夾名稱，默認為gulp-cache
        "tmpDir": "D:Documentsgulp-cache"http://指定一個本地的緩存目錄，默認為C:UsersAdministratorAppDataLocalTemp，建議換個目錄，因為一般會當作垃圾清除掉
      }),
      name: "js"http://緩存文件夾名稱再下一級的子目錄，本例類似：D:Documentsgulp-cache	estjs
    }))
    .pipe(gulp.dest("dist"));

系統提醒：gulp-notify

    gulp.src("from")
        .pipe($.zip("map.zip"))
        .pipe(gulp.dest("dist"))
        .pipe($.notify({message: "map壓縮完成"}));

文件注入：gulp-inject

    gulp.src("from", {cwd: "./src/entry/"})
        .pipe($.inject(gulp.src(["XX"], {read: false, cwd: "XXdir"}), {
          relative: true,
          starttag: "",
          endtag: "",
          transform: function(filePath, index){
            return "