Gulp4和Gulp3的區別

前言

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