更多內(nèi)容歡迎來(lái)到博客 ：https://imjianjian.github.io

gulp簡(jiǎn)介

• 自動(dòng)化 - gulp是一個(gè)工具包，可幫助您在開(kāi)發(fā)工作流程中自動(dòng)執(zhí)行痛苦或耗時(shí)的任務(wù)。
• 與平臺(tái)無(wú)關(guān) - 集成被集成到所有主流IDE中，人們正在使用PHP，.NET，Node.js，Java和其他平臺(tái)。
• 強(qiáng)大的生態(tài)系統(tǒng) - 使用npm模塊做任何你想要的，擁有超過(guò)2000個(gè)插件進(jìn)行流文件轉(zhuǎn)換。
• 簡(jiǎn)單 - 僅提供最少的API，易于學(xué)習(xí)和使用簡(jiǎn)單。
  用gulp對(duì)自己的描述就是：Automate and enhance your workflow。

安裝

要使用gulp要保證你的電腦上要有node環(huán)境

官方建議你這么安裝它

$ npm install gulp-cli -g
$ npm install gulp -D
$ touch gulpfile.js
$ gulp --help

更新

• 新的任務(wù)系統(tǒng)（基于 bach，替換掉了原先基于 orchestrator 的任務(wù)系統(tǒng)）
• 移除 gulp.reset
• gulp.task 不再支持三個(gè)參數(shù)的用法
• gulp.task 用字符串注冊(cè)的任務(wù)必須是直接在命令行中調(diào)用的任務(wù)
• gulp.task 可以接受單參數(shù)語(yǔ)法，這個(gè)參數(shù)必須是一個(gè)命名函數(shù)，函數(shù)名會(huì)被作為任務(wù)名
• 添加了 gulp.series 和 gulp.parallel 方法用于組合任務(wù)
• 添加了 gulp.tree 方法用于獲取任務(wù)樹(shù)，傳入 { deep: true } 參數(shù)可以得到一個(gè) archy 兼容的節(jié)點(diǎn)列表
• 添加了 gulp.registry 方法以定制注冊(cè)表。
• 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不過(guò)是以軟鏈接的方式
• gulp.dest 和 gulp.symlink 方法添加了 dirMode 參數(shù)允許對(duì)目標(biāo)目錄更好地控制
• gulp.src 接收的文件匹配字符串會(huì)順序解釋，所以你可以寫(xiě)成這樣 gulp.src(['.js', '!b.js', 'bad.js'])（排除所有以 b 開(kāi)頭的 JS 文件但是除了 bad.js）
• gulp.src 方法添加了 since 選項(xiàng)，篩選在特定時(shí)間點(diǎn)之后修改過(guò)的文件（用于增量編譯）
• 將命令行分離出來(lái)成為一個(gè)獨(dú)立模塊，以便節(jié)約帶寬/空間。用 npm install gulp -g 或 npm install gulp-cli -g 都可以安裝命令行，只是 gulp-cli 不包含模塊代碼所以比較小
• 命令行添加了 --tasks-json 參數(shù)，可以導(dǎo)出整個(gè)任務(wù)樹(shù)以供他用
• 命令行添加了 --verify 參數(shù)用以檢查 package.json 中是否包含黑名單插件（違背準(zhǔn)則而被禁入官方插件列表的可憐娃們）。

API

gulp4在gulp3的基礎(chǔ)上新增了幾個(gè)函數(shù)，但它的使用依舊簡(jiǎn)單方便。一共如下10個(gè)：

• gulp.src() --全局匹配一個(gè)或多個(gè)文件
• gulp.dest() --將文件寫(xiě)入目錄
• gulp.symlink() --與dest相似，但是使用軟連接形式
• gulp.task() --定義任務(wù)
• gulp.lastRun() --獲得上次成功運(yùn)行的時(shí)間戳
• gulp.parallel() --并行運(yùn)行任務(wù)
• gulp.series() --運(yùn)行任務(wù)序列
• gulp.watch() --當(dāng)文件發(fā)生變化時(shí)做某些操作
• gulp.tree() --獲得任務(wù)書(shū)樹(shù)
• gulp.registry() --獲得或注冊(cè)任務(wù)

官方說(shuō)明API說(shuō)明:https://github.com/gulpjs/gulp/blob/master/docs/API.md

task(parallel and series)

gulp不再能夠通過(guò)數(shù)組形式傳入任務(wù)，再gulp4中你需要使用gulp.series()和gulp.parallel()來(lái)執(zhí)行他們。例如：

gulp.task('default',gulp.parallel('taskA','taskB'));//并行執(zhí)行
gulp.task('default',gulp.series('taskA','taskB'));//按順序執(zhí)行

parallel和series函數(shù)可以接受函數(shù)作為參數(shù)，這意味著我們可以將任務(wù)用獨(dú)立函數(shù)表示：

funcion taskA(){...}
funcion taskB(){...}

gulp.task(taskA);//最簡(jiǎn)單的方式
gulp.task('i-am-taskB',taskB);//為taskB添加任務(wù)名
gulp.task('taskA-taskB', gulp.series(taskA, taskB));//序列執(zhí)行
gulp.task('taskA-taskB', gulp.parallel(taskA，taskB));//并行運(yùn)行

而且當(dāng)我們執(zhí)行序列化任務(wù)時(shí)，面板的輸出也更加清晰

PS D:\github\resume> gulp
[21:49:59] Using gulpfile D:\project\gulpfile.js
[21:49:59] Starting 'default'...
[21:49:59] Starting 'copyfile'...
[21:49:59] Finished 'copyfile' after 90 ms
[21:49:59] Starting 'minifyhtml'...
[21:49:59] Finished 'minifyhtml' after 171 ms
[21:49:59] Starting 'minifyCSS'...
[21:50:00] Finished 'minifyCSS' after 353 ms
[21:50:00] Starting 'uglyfyJS'...
[21:50:01] Finished 'uglyfyJS' after 1.43 s
[21:50:01] Finished 'default' after 2.05 s

gulp.lastRun()

語(yǔ)法：
gulp.lastRun(taskName,timeResolution)
參數(shù)：
taskName:任務(wù)名
timeResolution（可選）:返回的時(shí)間戳的精度

例如

gulp.lastRun('someTask', 1000) // 1426000004000.
gulp.lastRun('someTask', 100) // 1426000004300.

gulp.tree()

語(yǔ)法:
gulp.tree(option)
options：
{
    deep:true/false //是否遍歷每個(gè)子任務(wù)
}

示例gulpfile.js

gulp.task('one', function(done) {
  // do stuff
  done();
});

gulp.task('two', function(done) {
  // do stuff
  done();
});

gulp.task('three', function(done) {
  // do stuff
  done();
});

gulp.task('four', gulp.series('one', 'two'));

gulp.task('five',
  gulp.series('four',
    gulp.parallel('three', function(done) {
      // do more stuff
      done();
    })
  )
);

實(shí)例輸出

gulp.tree()

// output: [ 'one', 'two', 'three', 'four', 'five' ]

gulp.tree({ deep: true })

/*output: [
   {
      "label":"one",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"two",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"three",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"four",
      "type":"task",
      "nodes":[
          {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"one",
                  "type":"task",
                  "nodes":[]
               },
               {
                  "label":"two",
                  "type":"task",
                  "nodes":[]
               }
            ]
         }
      ]
   },
   {
      "label":"five",
      "type":"task",
      "nodes":[
         {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"four",
                  "type":"task",
                  "nodes":[
                     {
                        "label":"<series>",
                        "type":"function",
                        "nodes":[
                           {
                              "label":"one",
                              "type":"task",
                              "nodes":[]
                           },
                           {
                              "label":"two",
                              "type":"task",
                              "nodes":[]
                           }
                        ]
                     }
                  ]
               },
               {
                  "label":"<parallel>",
                  "type":"function",
                  "nodes":[
                     {
                        "label":"three",
                        "type":"task",
                        "nodes":[]
                     },
                     {
                        "label":"<anonymous>",
                        "type":"function",
                        "nodes":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/