gulp
什么是gulp
gulp:前端自動(dòng)化項(xiàng)目管理工具
功能: 自動(dòng)化壓縮js, css文件稽亏， 自動(dòng)壓縮圖片文件论熙，自動(dòng)合并文件沛硅，編譯less眼刃，sass，es6轉(zhuǎn)es5等
要使用gulp摇肌，需要安裝node環(huán)境
- 安裝：
$ npm install gulp -g
$ npm install gulp -D
- API：
gulp.src() --全局匹配一個(gè)或多個(gè)文件
gulp.dest() --將文件寫入目錄
gulp.symlink() --與dest相似擂红，但是使用軟件連接形式
gulp.task() --定義任務(wù)
gulp.parallel() --并行運(yùn)行任務(wù)
gulp.series() --運(yùn)行任務(wù)序列
gulp.watch() --當(dāng)文件發(fā)生變化時(shí)做某些操作
gulp.lastRun() --獲得上次成功運(yùn)行的時(shí)間戳
gulp.tree() --獲得任務(wù)書樹
gulp.registry() --獲得或注冊(cè)任務(wù)
發(fā)布任務(wù)
- 安裝好gulp后，可以在當(dāng)前文件夾下開啟命令行工具，然后輸入gulp,結(jié)果如下
[19:48:29] No gulpfile found
結(jié)果告訴我們昵骤，在目錄下找不到gulpfile树碱。
注：gulpfile是一個(gè)js文件，我們需要在目錄下創(chuàng)建一個(gè)gulpfile.js文件变秦，將來的任務(wù)都在gulfile.js中執(zhí)行成榜。
- 目錄下創(chuàng)建gulpfile.js文件,再次輸入命令gulp,結(jié)果如下 ：
[19:59:54] Using gulpfile D:\個(gè)人\nodelearn\gulpDemo\gulpfile.js
[19:59:54] Task never defined: default
[19:59:54] To list available tasks, try running: gulp --tasks
結(jié)果提示，default任務(wù)沒有定義蹦玫，可以嘗試運(yùn)行g(shù)ulp --tasks
- gulpfile.js中使用task定義的default任務(wù)
const gulp = require("gulp");
gulp.task("default",function(){
console.log("default任務(wù)執(zhí)行了");
});
結(jié)果如下：
[20:11:00] Using gulpfile D:\個(gè)人\nodelearn\gulpDemo\gulpfile.js
[20:11:00] Starting 'default'...
default任務(wù)執(zhí)行了
[20:11:00] The following tasks did not complete: default
[20:11:00] Did you forget to signal async completion?
說明：執(zhí)行了default任務(wù)赎婚，但是并沒有結(jié)束任務(wù)（如果結(jié)束？往下看）樱溉。
gulp.task("default",function(done){
console.log("default任務(wù)執(zhí)行了");
done();
});
done();//結(jié)束任務(wù)
- 創(chuàng)建并行任務(wù)（多個(gè)任務(wù)同時(shí)執(zhí)行）
const gulp = require("gulp")
//創(chuàng)建并行任務(wù)
gulp.task("default",gulp.parallel(taskA,taskB));
function taskA(){
console.log("執(zhí)行了A");
}
function taskB(){
console.log("執(zhí)行了B");
}
taskA,taskB任務(wù)同時(shí)執(zhí)行
- 創(chuàng)建序列任務(wù)(任務(wù)執(zhí)行完一個(gè)再一個(gè))
gulp.task("default",gulp.series(taskA,taskB));
function taskA(){
console.log("執(zhí)行了A");
}
function taskB(){
console.log("執(zhí)行了B");
}
沒有調(diào)用done(),taskA沒有執(zhí)行完挣输，則taskB不會(huì)執(zhí)行
- 給任務(wù)添加別名，執(zhí)行命令時(shí)需要使用： gulp+任務(wù)名
gulp.task("taskA",taskA);
function taskA(){
console.log("執(zhí)行了A");
}
輸入命令：gulp taskA;
布置一個(gè)任務(wù)：將src目錄下的index.html文件復(fù)制到dest目錄下
//布置一個(gè)任務(wù)：將src目錄下的index.html文件復(fù)制到dest目錄下
gulp.task("copyHtml",copyHtml);
function copyHtml(){
return gulp.src("src/index.html").pipe(gulp.dest("dest"));
}
dest目錄會(huì)自動(dòng)生成
src()源文件路徑 讀取文件 是一個(gè)輸出流
pipe()管道輸送 處理文件 是一個(gè)輸出流
dest()目標(biāo)目錄 輸入文件 是一個(gè)輸入流
return:結(jié)束任務(wù)福贞，相當(dāng)于done()撩嚼。
布置一個(gè)任務(wù)：將lib目錄下的所有js文件復(fù)制到j(luò)s目錄下
gulp.src("lib/*.js").pipe( gulp.dest("js") );
- gulp.src("lib/")與gulp.src("lib//的區(qū)別")
lib/：代表src下的所有一級(jí)目錄的文件,不包含二級(jí)目錄文件
lib/：代表src下的所有文件，包含所有二級(jí)目錄文件和多級(jí)目錄文件
lib//**:代表src下的二級(jí)目錄下的所有文件
匹配模式
-
單匹配模式
image.png
-
多匹配模式
1.類正則：
image.png2.數(shù)組匹配：
布置一個(gè)任務(wù)：將不同目錄下的文件復(fù)制到dest目錄下
src參數(shù)可以是一個(gè)數(shù)組
gulp.task("copyCss",function(){
return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
});
gulp.watch()監(jiān)聽
gulp.task("watchCss",function(){
return gulp.watch(["src/*.css","lib/*.css"],()=>{
return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
});
})
ctrl+c結(jié)束監(jiān)聽
文件合并：npm install gulp-concat --save-dev
css文件壓縮：npm install gulp-cssmin --save-dev
文件重命名：npm install gulp-rename --save-dev
task("concatCss",function(done){
return src(["src/*.css","lib/*.css"])
.pipe(concat("concat.css"))
.pipe(cssmin())
.pipe(rename("concat.min.css"))
.pipe(dest("dest"));
})
js文件壓縮：npm install gulp-uglify --save-dev
task("uglifyJs",function(done){
return src("lib/*.js")
.pipe(concat("concatJs.js"))
.pipe(uglify())
.pipe(rename("concatJs.min.js"))
.pipe(dest("dest/js"))
})
圖片壓縮：npm install gulp-imagemin@4 --save-dev
//寫法一
task("minImg",function(done){
return src("images/*.{png,jpg,gif,ico}")
.pipe(imagemin())
.pipe(dest("dest/photo"));
})
//寫法二
task("minImg",function(done){
return src("images/*.{png,jpg,gif,ico}")
.pipe(imagemin({
optimizationLevel: 5, //類型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)）
progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片
interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
multipass: true, //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
}))
.pipe(dest("dest/photo"));
})
//寫法三
task("minImg",function(done){
pump([
src("images/*.{png,jpg,gif,ico}"),
imagemin({
optimizationLevel: 5, //類型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)）
progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片
interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
multipass: true, //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
}),
dest("dest/images")
],done)
})
//寫法四
task("minImg",function(done){
pump([
src("images/*.{png,jpg,gif,ico}"),
imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
}),
]),
dest("dest/images")
],done)
})
es6轉(zhuǎn)es5 ：npm install gulp-babel @babel/core @babel/preset-env --save-dev
task("ES6ToES5",function(done){
return src("lib/*.js")
.pipe(babel({
"presets":["@babel/env"] //es6轉(zhuǎn)es5 這里需要設(shè)置presets
}))
.pipe(dest("dest/e6te5"))
})
