走進(jìn)gulp4的世界

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

gulp簡介

  • 自動化 - gulp是一個工具包吟税,可幫助您在開發(fā)工作流程中自動執(zhí)行痛苦或耗時的任務(wù)。
  • 與平臺無關(guān) - 集成被集成到所有主流IDE中,人們正在使用PHP,.NET,Node.js,Java和其他平臺蔽莱。
  • 強(qiáng)大的生態(tài)系統(tǒng) - 使用npm模塊做任何你想要的,擁有超過2000個插件進(jìn)行流文件轉(zhuǎn)換戚长。
  • 簡單 - 僅提供最少的API盗冷,易于學(xué)習(xí)和使用簡單。
    用gulp對自己的描述就是: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 不再支持三個參數(shù)的用法
  • gulp.task 用字符串注冊的任務(wù)必須是直接在命令行中調(diào)用的任務(wù)
  • gulp.task 可以接受單參數(shù)語法,這個參數(shù)必須是一個命名函數(shù)迫肖,函數(shù)名會被作為任務(wù)名
  • 添加了 gulp.series 和 gulp.parallel 方法用于組合任務(wù)
  • 添加了 gulp.tree 方法用于獲取任務(wù)樹锅劝,傳入 { deep: true } 參數(shù)可以得到一個 archy 兼容的節(jié)點列表
  • 添加了 gulp.registry 方法以定制注冊表。
  • 添加了 gulp.symlink 方法咒程,功能和 gulp.dest 一致鸠天,不過是以軟鏈接的方式
  • gulp.dest 和 gulp.symlink 方法添加了 dirMode 參數(shù)允許對目標(biāo)目錄更好地控制
  • gulp.src 接收的文件匹配字符串會順序解釋讼育,所以你可以寫成這樣 gulp.src(['.js', '!b.js', 'bad.js'])(排除所有以 b 開頭的 JS 文件但是除了 bad.js)
  • gulp.src 方法添加了 since 選項帐姻,篩選在特定時間點之后修改過的文件(用于增量編譯)
  • 將命令行分離出來成為一個獨(dú)立模塊,以便節(jié)約帶寬/空間奶段。用 npm install gulp -g 或 npm install gulp-cli -g 都可以安裝命令行饥瓷,只是 gulp-cli 不包含模塊代碼所以比較小
  • 命令行添加了 --tasks-json 參數(shù),可以導(dǎo)出整個任務(wù)樹以供他用
  • 命令行添加了 --verify 參數(shù)用以檢查 package.json 中是否包含黑名單插件(違背準(zhǔn)則而被禁入官方插件列表的可憐娃們)痹籍。

API

gulp4在gulp3的基礎(chǔ)上新增了幾個函數(shù)呢铆,但它的使用依舊簡單方便。一共如下10個:

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

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

task(parallel and series)

gulp不再能夠通過數(shù)組形式傳入任務(wù)棺克,再gulp4中你需要使用gulp.series()和gulp.parallel()來執(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);//最簡單的方式
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ù)時,面板的輸出也更加清晰

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)
參數(shù):
taskName:任務(wù)名
timeResolution(可選):返回的時間戳的精度

例如

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

gulp.tree()

語法:
gulp.tree(option)
options:
{
    deep:true/false //是否遍歷每個子任務(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();
    })
  )
);

實例輸出

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":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末斤讥,一起剝皮案震驚了整個濱河市纱皆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖派草,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搀缠,死亡現(xiàn)場離奇詭異,居然都是意外死亡近迁,警方通過查閱死者的電腦和手機(jī)艺普,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钳踊,“玉大人衷敌,你說我怎么就攤上這事⊥氐桑” “怎么了缴罗?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長祭埂。 經(jīng)常有香客問我面氓,道長,這世上最難降的妖魔是什么蛆橡? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任舌界,我火速辦了婚禮,結(jié)果婚禮上泰演,老公的妹妹穿的比我還像新娘呻拌。我一直安慰自己,他們只是感情好睦焕,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布藐握。 她就那樣靜靜地躺著,像睡著了一般垃喊。 火紅的嫁衣襯著肌膚如雪猾普。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天本谜,我揣著相機(jī)與錄音初家,去河邊找鬼。 笑死乌助,一個胖子當(dāng)著我的面吹牛溜在,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播他托,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼掖肋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了上祈?” 一聲冷哼從身側(cè)響起培遵,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤浙芙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后籽腕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嗡呼,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年皇耗,在試婚紗的時候發(fā)現(xiàn)自己被綠了南窗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡郎楼,死狀恐怖万伤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情呜袁,我是刑警寧澤敌买,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站阶界,受9級特大地震影響虹钮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膘融,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一芙粱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧氧映,春花似錦春畔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至疗绣,卻和暖如春线召,著一層夾襖步出監(jiān)牢的瞬間铺韧,已是汗流浹背多矮。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留哈打,地道東北人塔逃。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像料仗,于是被迫代替她去往敵國和親湾盗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個前端構(gòu)建工具立轧,與gruntjs相比格粪,gulpjs無需寫一大堆繁雜的配置參數(shù)躏吊,API也非常簡單,學(xué)...
    井皮皮閱讀 1,293評論 0 10
  • gulpjs是一個前端構(gòu)建工具帐萎,與gruntjs相比比伏,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單疆导,學(xué)...
    小裁縫sun閱讀 923評論 0 3
  • 流程 1. 輸入命令(可以使用git bash或者命令控制臺cmd) npm install -g gulp 安裝...
    神秘者007閱讀 641評論 0 0
  • gulpjs是一個前端構(gòu)建工具赁项,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù)澈段,API也非常簡單悠菜,學(xué)...
    依依玖玥閱讀 3,150評論 7 55
  • gulpjs是一個前端構(gòu)建工具,與gruntjs相比败富,gulpjs無需寫一大堆繁雜的配置參數(shù)悔醋,API也非常簡單,學(xué)...
    build1024閱讀 527評論 0 0