Question

这是旧的配置文件。

当前gulp版本为4.0
如何通过 gulp.series（）， gulp.parallel（）修改此配置文件？

我看了所有翻译过的教程，不太了解。
如何修改此配置文件（gulp 4.0> gulp监视，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代码。

修改gulpfile.js（gulp 4.0）

2 个答案: