更多內(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":[]
}
]
}
]
}
]
}
]
*/