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

gulp是什么？

一個(gè)自動(dòng)化構(gòu)建工具，基于nodejs的自動(dòng)任務(wù)運(yùn)行器。

為什么要使用它？

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

和grunt、webpack的區(qū)別

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

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

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

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

gulp也能調(diào)用webpack。

為什么要用4.0？

組合任務(wù)。

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

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

  //clear任務(wù)執(zhí)行完后，才會(huì)執(zhí)行copy
gulp.task("build",
  gulp.series("clear","copy")
 );

//inject:home和inject:list這2個(gè)任務(wù)同時(shí)執(zhí)行
 gulp.task("inject-all",
  gulp.parallel("inject:home",
    "inject:list"
  )
 );

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

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

支持異步任務(wù)

有3種方式確認(rèn)gulp能夠識別任務(wù)何時(shí)完成。后2者重要是return

回調(diào)

返回一個(gè)流

返回一個(gè)Promise

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

npm包管理

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

dependencies是項(xiàng)目中必須的包，目前我們沒有用到，只有個(gè)vue。
devDependencies是開發(fā)所用的包，發(fā)布到生產(chǎn)環(huán)境不需要的都放在這里，平時(shí)安裝時(shí)需要用npm install -save-dev XX，可簡寫作npm i -D XX。

同時(shí)安裝多個(gè)包可以這樣：npm install -save-dev aa bb?；蛘邔鼜?fù)制到package文件里，直接在根目錄命令行里npm i或npm install。

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

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

怎么安裝

全局：npm i gulp -g

工程內(nèi)部：npm i -D gulp

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

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

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

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

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

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

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

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

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

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

options.buffer 類型： Boolean 默認(rèn)值： true

如果該項(xiàng)被設(shè)置為 false，那么將會(huì)以 stream 方式返回 file.contents 而不是文件 buffer的形式。這在處理一些大文件的時(shí)候?qū)?huì)很有用。

options.read 類型：Boolean 默認(rèn)值： true

如果該項(xiàng)被設(shè)置為false，那么file.contents會(huì)返回空值（null），也就是并不會(huì)去讀取文件。只獲取文件路徑，不需要讀取內(nèi)容時(shí)有用。

options.base

舉個(gè)例子感受一下，比如一個(gè)路徑為 client/js/somedir 的目錄中，有一個(gè)文件叫 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 進(jìn)來，并且將會(huì)寫文件。并且重新輸出（emits）所有數(shù)據(jù)，因此你可以將它 pipe 到多個(gè)文件夾。如果某文件夾不存在，將會(huì)自動(dòng)創(chuàng)建。

path 類型： String or Function

文件將被寫入的路徑（輸出目錄）。也可以傳入一個(gè)函數(shù)，在函數(shù)中返回相應(yīng)路徑

options 類型： Object

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

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

options.mode 類型： String 默認(rèn)值： 0777

八進(jìn)制權(quán)限字符，用以定義所有在輸出目錄中所創(chuàng)建的目錄的權(quán)限。

gulp.watch(glob[, opts])

舊版本有個(gè)參數(shù)回調(diào)，比如：

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

將變?yōu)椋?/p>

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

或監(jiān)聽多帶帶的事件類型，基本的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

有細(xì)節(jié)可以配置

 uglify({
  compress: {
    drop_console:true, //刪除console，默認(rèn)false
    drop_debugger: false//忽略debugger，默認(rèn)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())//原來名字叫g(shù)ulp-clean-css，以駝峰形式使用
.pipe(gulp.dest("dist"));

重命名：gulp-rename

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

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

條件：gulp-if

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

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

緩存：gulp-cache

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

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

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

系統(tǒng)提醒：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 "