前言
如果是第一次使用Gulp,可以点击查看Gulp的安装和Gulp3介绍https://blog.csdn.net/Charissa2017/article/details/104496750
举个例子,当任务二要在任务一完成后再执行,在Gulp3中,我们可以这样写:
var gulp=require("gulp");
gulp.task("one",function () {
console.log("one");
});
//如果执行gulp two,这时候就会先执行任务one,再执行任务two
gulp.task("two",["one"],function () {
console.log("two")
});
但是在Gulp4中,执行gulp two ,就会报错。
AssertionError [ERR_ASSERTION]: Task function must be specified
gulp4 最大的变化就是task中不再使用前置任务的数组,而改为series 和 parallel。
下面开始Gulp4的内容:
Gulp4
一、task的函数写法
Gulp4中,可以使用函数封装代码块,使用exports导出任务。
var gulp=require("gulp");
//gulp3的写法
gulp.task("task1",function () {
console.log("aaa");
});
//使用函数
function fn1(){
console.log("aaa");
}
exports.task1=fn1;
先举一个例子,等你看完下面的内容后,再回过来看这段代码:
const {task, series} = require("gulp")
task("one", done=>{
console.log("one");
done();
})
task("two", ()=>{
return new Promise(function(res,rej){
console.log("two");
res();
})
})
exports.task1 = series("one","two")
二、前置任务写法
- gulp3 在task中使用前置任务的数组;
- gulp4 中前置任务使用series 和 parallel;
- gulp.series 按照顺序执行,先完成前置任务,再执行后面函数;
- gulp.parallel 并行执行,一起执行任务,前置任务和后面的函数是同时执行的;
var gulp=require("gulp");
gulp.task("three",gulp.series("one","two",function(){
//one --> two --> three
console.log("three");
}));
gulp.task("three",gulp.parallel("one","two",function(){
//one two three
console.log("three");
}));
//也可以这么写
gulp.task("five",gulp.series("one",gulp.parallel("two","three"),"four",function(){
//one --> two three --> four --> five
console.log("five");
}));
gulp.series(),按照顺序执行
gulp.parallel(),并行执行
gulp.series(),gulp.parallel(),嵌套使用
三、任务完成状态
除了前置任务的语法改变外,gulp4的另一个变化就是,当任务完成时,要告之该任务已经完成,否则也会报错:
Did you forget to signal async completion?
我们可以通过以下三种方式,告之服务器该任务已经完成:
回调函数法
注意下面的done,在函数中有参数done,当完成当前任务内容后执行回调函数done,后续任务save中的function函数被执行,会打印aaaa,如果不执行done,就不会执行后续任务。
var gulp=require("gulp");
gulp.task("js",function(done){
gulp.src("./src/**/*.js")
.pipe(load.babel(
{
"presets": ["@babel/env"]
}
))
.pipe(gulp.dest("./dist"))
done();
})
gulp.task("save",gulp.series("js",function(){
console.log("aaaa");
gulp.src("./dist/**/*.js")
.pipe(load.concat("main.min.js"))
.pipe(load.uglify())
.pipe(gulp.dest("./dist"));
}));
promise法
下面这种promise写法,通过return promise,在执行完成任务后,执行其中的res,就会执行后续save任务中的函数方法,打印aaaa。
gulp.task("js",function(){
return new Promise(function(res,rej){
gulp.src("./src/**/*.js")
.pipe(load.babel(
{
"presets": ["@babel/env"]
}
))
.pipe(gulp.dest("./dist"));
res();
})
})
gulp.task("save",gulp.series("js",function(){
console.log("aaaa");
gulp.src("./dist/**/*.js")
.pipe(load.concat("main.min.js"))
.pipe(load.uglify())
.pipe(gulp.dest("./dist"));
}));
事件完成操作后回调
以上的案例是js任务解决了ES6转换ES5,任务save重新获取转换好的js文件合并压缩后存储为main.min.js。但是使用上面两个方法后,我们发现后面没有合并存储,原因是什么呢?上面的两种写法在任务中标识完成了,但是不代表操作就完成了,js任务最后存储是需要时间的,但是当开始存储时就已经执行了后续的任务,显然在后续任务中不能找到这个被转换后的文件。那么我们应该通过什么操作,这里我们需要等待上面内容完成后才可以操作后续内容,也就是通过事件end判断完成存储后再继续执行后续任务。
gulp.task("js",function(done){
gulp.src("./src/**/*.js")
.pipe(load.babel(
{
"presets": ["@babel/env"]
}
))
.pipe(gulp.dest("./dist"))
.on("end",done);
})
gulp.task("save",gulp.series("js",function(){
console.log("aaaa");
gulp.src("./dist/**/*.js")
.pipe(load.concat("main.min.js"))
.pipe(load.uglify())
.pipe(gulp.dest("./dist"));
}));