將 Gulp3 升級至 Gulp4 之路

本文章可以幫你

使用NVM做nodeJS版本控管
將Gulp3升級至Gulp4
排除遇到的雷

安裝NVM與使用

先安裝nvm windows

簡單的nvm指令

1
2
3

nvm install [node version]
nvm list
nvm use [node version]

安裝Gulp到NVM

NVM會將node_modules裝到該NVM/[node version]目錄下，不是原本預設的 C:\Users[user name]\AppData\Roaming\npm，因此需要重新安裝npm install gulp -g

安裝Gulp4後會需要修改的寫法

將 “run-sequence”改為gulp.series與gulp.parallel

gulp3

gulp.task("my-task", function() {
    runSequence(
        "my-task1",
        "my-task2",
        [
            "my-task3",
            "my-task4"
        ],
        function() {
            console.log("run");
        }
    );
});

gulp4

gulp.task("my-task",
    gulp.series(
        "my-task1",
        "my-task2",
        gulp.parallel(
            "my-task3",
            "my-task4"
        ),
        function(cp) {
            console.log("run");
            cp();
        }
    )
);

將gulp.run改為tast()

gulp3
1
gulp.run("my-task", function() {});
gulp4
1
gulp.task("my-task", function() {});

回傳值需要加上return

gulp3

1
2
3

gulp.task("my-task", function() {
    gulp.src(["./src"]).pipe(gulp.dest("build"));
});

gulp4

1
2
3

gulp.task("my-task", function() {
    return gulp.src(["./src"]).pipe(gulp.dest("build"));
});

呼叫task的時候需要預先定義好，因此需要把呼叫端方到後方

sass呼叫需要修改

gulp3

1 2	const sass = require("gulp-sass"); sass.compiler = require("sass");

gulp4

1	const sass = require("gulp-sass")(require("sass"));