修改 gulpfile.js (gulp 4.0)

Question

这是旧的配置文件。

当前的 gulp 版本是 4.0
如何通过gulp.series()、gulp.parallel()修改这个配置文件？

我看了所有翻译的教程，不是很懂。
如何修改这个配置文件（gulp 4.0 > gulp watch, gulp.series, gulp.parallel）？

谢谢

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoPrefixer = require("gulp-autoprefixer"),
    minifyCss = require("gulp-clean-css"),
    rename = require("gulp-rename"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    plumber = require("gulp-plumber"),
    util = require("gulp-util"),
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload;
var srcs = {
    "html": ["./**/*.html"],
    "css": ["./assets/css/**/*.css"],
    "sass": ["./assets/sass/**/*.scss"],
    "js": ["./assets/js/*.js"],
};

gulp.task("default", ["browser-sync"]);

gulp.task("sass", function (done) {
    return gulp.src("./assets/sass/sys.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoPrefixer({
            browsers: ["> 5%", "last 2 versions", "not ie <=8"],
            cascade: true,
            remove: true
        }))
        .pipe(rename({
            basename: "sys"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }))
        .pipe(minifyCss())
        .pipe(rename({
            suffix: ".m"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({
            stream: true
        }));
    util.log(util.colors.yellow("website styles compied and minified"));
});

gulp.task("js", function (done) {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

gulp.task("browser-sync", ["sass", "js"], function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);
    gulp.watch(srcs.sass, ["sass"]);
    gulp.watch(srcs.js, ["js"]);
});

Answer 1

从 Gulp 4 开始，不需要通过 task() 方法注册任务。 Gulp API 仍将支持这种方法，但现在使用导出是注册任务的主要方法。 （见：https://gulpjs.com/docs/en/getting-started/creating-tasks）

除了这种新方法，所有流方法（src, dest, series, parallel, watch）都可以通过 ES6 解构赋值特性定义为：

const {src, dest, watch, series, parallel} = require('gulp');

此外，Gulp 4 中关于串行和并行的酷特性是无限嵌套，因此使用这种方法可以避免重复任务。 （参见：https://gulpjs.com/docs/en/api/series 和 https://gulpjs.com/docs/en/api/parallel）

所以根据 Gulp 4 功能修改的 gulpfile.js 将如下所示：

const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment

    var sass = require("gulp-sass"),
        autoPrefixer = require("gulp-autoprefixer"),
        minifyCss = require("gulp-clean-css"),
        rename = require("gulp-rename"),
        concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
        uglify = require("gulp-uglify"),//you don't use this anywhere.  Avoid importing objects to reduce memory buffer overload
        plumber = require("gulp-plumber"),
        util = require("gulp-util"),
        browserSync = require("browser-sync").create(),
        reload = browserSync.reload;

    var srcs = { 
        html: ["./**/*.html"],
        css: ["./assets/css/**/*.css"],
        sass: ["./assets/sass/**/*.scss"],
        js: ["./assets/js/*.js"],
    };



    function sass() {
        return src("./assets/sass/sys.scss")
            .pipe(plumber())
            .pipe(sass())
            .pipe(autoPrefixer({
                browsers: ["> 5%", "last 2 versions", "not ie <=8"],
                cascade: true,
                remove: true
            }))
            .pipe(rename({
                basename: "sys"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }))
            .pipe(minifyCss())
            .pipe(rename({
                suffix: ".m"
            }))
            .pipe(dest("./assets/css"))
            .pipe(reload({
                stream: true
            }));
        util.log(util.colors.yellow("website styles compied and minified"));
    }

    function js(){
        return src("./assets/js/sys.js")
            .pipe(reload({
                stream: true
            })); //not sure if you intentionally did not put dest() stream method
    }

    function browser_sync(cb) {
        browserSync.init({
            server: {
                baseDir: "./"
            },
            browser: ["google chrome"]
        });
        const watcher = watch(srcs.html);

        watcher.on('change',  reload);

        watcher.on("change", reload);
        watch(srcs.sass, series(sass));
        watch(srcs.js,  series(js));
        cb();
    }

    //this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
    exports.default = series(parallel(sass, js), browser_sync);

Answer 2

     // don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {        
    // all your stuff unchanged here
});

    // don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
    return gulp.src("./assets/js/sys.js")
        .pipe(reload({
            stream: true
        }));
});

// gulp.task('taskName', only one other parameter with the function call part of gulp.series

gulp.task("browser-sync", gulp.series("sass", "js", function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        browser: ["google chrome"]
    });
    gulp.watch(srcs.html).on("change", reload);

    // don't need gulp.series below if only calling a single task
    // but if you wanted it:  gulp.watch(srcs.sass, gulp.series("sass"));
    // It does seem that sometimes the gulp.series is needed even though the docs 
    //     specifically say you don't when calling only a single task

    gulp.watch(srcs.sass, "sass");
    gulp.watch(srcs.js, "js");
}));

 // move below to the bottom, if using gulp.task cannot call a task before it has been registered, 
 //   i.e., gulp.task("browser-sync"........

 gulp.task("default", "browser-sync");

查看good migration to gulp4 article。

如果您将任务完全更改为文章或 gulpJS 文档中提到的函数、导出等，还有更多 gulp4 好处。但以上内容应该可以帮助您使用 gulp4 代码。