Gulp4和Gulp3的区别

2020-02-26 15:38:37 阅读：562 来源： 互联网

标签：function pipe task 区别 Gulp3 Gulp4 js gulp two

前言

如果是第一次使用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"));
}));

蒲公英芽发布了88 篇原创文章 · 获赞 40 · 访问量 2万+ 私信关注

标签：function,pipe,task,区别,Gulp3,Gulp4,js,gulp,two
来源： https://blog.csdn.net/Charissa2017/article/details/104512721

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9