走進gulp4的世界

更多內容歡迎來到博客 ：https://imjianjian.github.io

gulp簡介

• 自動化 - gulp是一個工具包，可幫助您在開發工做流程中自動執行痛苦或耗時的任務。
• 與平臺無關 - 集成被集成到全部主流IDE中，人們正在使用PHP，.NET，Node.js，Java和其餘平臺。
• 強大的生態系統 - 使用npm模塊作任何你想要的，擁有超過2000個插件進行流文件轉換。
• 簡單 - 僅提供最少的API，易於學習和使用簡單。

用gulp對本身的描述就是：Automate and enhance your workflow。

安裝

要使用gulp要保證你的電腦上要有node環境

官方建議你這麼安裝它

//全局安裝gulp命令行
$ npm install gulp-cli -g

//gulp4.0
$ npm install gulp@next -D

//gulp3.9.1
$ npm install gulp -D 

//建立gulpfile.js文件
$ touch gulpfile.js
$ gulp --help

更新

• 新的任務系統（基於 bach，替換掉了原先基於 orchestrator 的任務系統）
• 移除 gulp.reset
• gulp.task 再也不支持三個參數的用法
• gulp.task 用字符串註冊的任務必須是直接在命令行中調用的任務
• gulp.task 能夠接受單參數語法，這個參數必須是一個命名函數，函數名會被做爲任務名
• 添加了 gulp.series 和 gulp.parallel 方法用於組合任務
• 添加了 gulp.tree 方法用於獲取任務樹，傳入 { deep: true } 參數能夠獲得一個 archy 兼容的節點列表
• 添加了 gulp.registry 方法以定製註冊表。
• 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不過是以軟連接的方式
• gulp.dest 和 gulp.symlink 方法添加了 dirMode 參數容許對目標目錄更好地控制
• gulp.src 接收的文件匹配字符串會順序解釋，因此你能夠寫成這樣 gulp.src(['.js', '!b.js', 'bad.js'])（排除全部以 b 開頭的 JS 文件可是除了 bad.js）
• gulp.src 方法添加了 since 選項，篩選在特定時間點以後修改過的文件（用於增量編譯）
• 將命令行分離出來成爲一個獨立模塊，以便節約帶寬/空間。用 npm install gulp -g 或 npm install gulp-cli -g 均可以安裝命令行，只是 gulp-cli 不包含模塊代碼因此比較小
• 命令行添加了 --tasks-json 參數，能夠導出整個任務樹以供他用
• 命令行添加了 --verify 參數用以檢查 package.json 中是否包含黑名單插件（違背準則而被禁入官方插件列表的可憐娃們）。

API

gulp4在gulp3的基礎上新增了幾個函數，但它的使用依舊簡單方便。一共以下10個：

• gulp.src() --全局匹配一個或多個文件
• gulp.dest() --將文件寫入目錄
• gulp.symlink() --與dest類似，可是使用軟鏈接形式
• gulp.task() --定義任務
• gulp.lastRun() --得到上次成功運行的時間戳
• gulp.parallel() --並行運行任務
• gulp.series() --運行任務序列
• gulp.watch() --當文件發生變化時作某些操做
• gulp.tree() --得到任務書樹
• gulp.registry() --得到或註冊任務

官方說明API說明:https://github.com/gulpjs/gul...

task(parallel and series)

gulp4再也不可以經過數組形式傳入任務，你須要使用gulp.series()和gulp.parallel()來執行他們。例如：

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

parallel和series函數能夠接受函數做爲參數，這意味着咱們能夠將任務用獨立函數表示：

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

gulp.task(taskA);//最簡單的方式
gulp.task('i-am-taskB',taskB);//爲taskB添加任務名
gulp.task('taskA-taskB', gulp.series(taskA, taskB));//序列執行
gulp.task('taskA-taskB', gulp.parallel(taskA，taskB));//並行運行

並且當咱們執行序列化任務時，面板的輸出也更加清晰

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()

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

例如

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

gulp.tree()

語法:
gulp.tree(option)
options：
{
    deep:true/false //是否遍歷每一個子任務
}

示例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();
    })
  )
);

實例輸出

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":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/

gulp-load-plugins

這是一個用於自動加載插件的gulp插件，安裝以下：

npm install gulp-load-plugins -D

當一個項目須要不少插件來管理的時候，你的gulpfile.js可能會變成這樣：

var gulp = require('gulp'),
    a = require('gulp-a'), 
    b = require('gulp-b'),
    c = require('gulp-c'),
    ...
    ...
    z = require('gulp-z');

使用gulp-load-plugins可讓你少寫一些重複代碼，你能夠這樣使用：

var gulp = require('gulp');
//加載gulp-load-plugins插件，並立刻運行它
var plugins = require('gulp-load-plugins')();
//或是：
//var gulpLoadPlugins = require('gulp-load-plugins');
//var plugins = gulpLoadPlugins();

調用插件

plugins.clone() //等價於require('gulp-clone')();

實質上是gulp幫助咱們作了以下操做

plugins.clone= require(‘gulp-clone’);