将 gulp 脚本从 V3 转换为 V4 时出错

Question

我正在一个旧项目上从 3.9.1 更新到 gulp4。由于升级，我不得不根据文档重写任务。我已切换到名称函数，并且正在使用 gulp.series，但出现以下错误：

AssertionError [ERR_ASSERTION]：任务从未定义：mobile_styles

下面是我的 gulp 文件。它主要由桌面和移动设备上两种语言的观看脚本组成

var fontName = "project-icons",
    gulp = require("gulp"),
    sass = require("gulp-sass"),
    sourcemaps = require("gulp-sourcemaps"),
    iconfont = require("gulp-iconfont"),
    iconfontCss = require("gulp-iconfont-css");

var sassOptions = {
    errLogToConsole: true,
    outputStyle: "expanded"
};

function iconfont(done) {
    gulp.src(["./icons/*.svg"])
        .pipe(
            iconfontCss({
                fontName: fontName,
                path: "sass",
                targetPath: "../sass/static/icons/_icons.sass",
                fontPath: "./fonts/",
                cssClass: "icon"
            })
        )
        .pipe(
            iconfont({
                formats: ["ttf", "eot", "woff", "woff2", "svg"],
                fontName: fontName,
                normalize: true,
                fixedWidth: true,
                centerHorizontally: true
            })
        )
        .on("glyphs", function(glyphs, options) {})
        .pipe(gulp.dest("./fonts/"));
    done();
}

function desktop_styles() {
    return gulp
        .src("./sass/_en/style.sass")
        .pipe(
            sourcemaps.init({
                loadMaps: true,
                identityMap: true,
                sourceRoot: "../css/"
            })
        )
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./css/"));
}

function desktop_styles_rtl() {
    return gulp
        .src("./sass/_ar/style.sass")
        .pipe(
            sourcemaps.init({
                loadMaps: true,
                identityMap: true,
                sourceRoot: "../css/"
            })
        )
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./css/lang/rtl"));
}

function mobile_styles() {
    return gulp
        .src("./sass/en/mobile/style.sass")
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(gulp.dest("./css/m"));
}

function mobile_styles_rtl() {
    return gulp
        .src("./sass/rtl/m/style.sass")
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(gulp.dest("./css/lang/rtl/m"));
}

gulp.task(
    "watch:all",
    gulp.series(
        "mobile_styles",
        "mobile_styles_rtl",
        "desktop_styles",
        "desktop_styles_rtl",
        function() {
            gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
            gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
            gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
            gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
        }
    )
);

gulp.task(
    "watch:AllDesktop",
    gulp.series("desktop_styles", "desktop_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
        gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
    })
);

gulp.task(
    "watch:desktop_styles_rtl",
    gulp.series("desktop_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
    })
);

gulp.task(
    "watch:desktop_en",
    gulp.series("desktop_styles", function() {
        gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
    })
);

gulp.task(
    "watch:mobile_rtl",
    gulp.series("mobile_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
    })
);

gulp.task(
    "watch:mobile_en",
    gulp.series("mobile_styles", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
    })
);

gulp.task(
    "watch:AllMobile",
    gulp.series("mobile_styles", "mobile_styles_rtl", function() {
        gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
        gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
    })
);

有人可以帮我解决这个问题吗？我应该为任务切换到 gulp.parallels 还是我以错误的方式重构它？

Answer 1

你所有的手表都应该是这样的：

gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles)

因此，例如，更改为：

gulp.task(
    "watch:all",
    gulp.series(
        mobile_styles,
        mobile_styles_rtl,
        desktop_styles,
        desktop_styles_rtl,
        function(done) {
            gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
            gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
            gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
            gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
            done();
        }
    )
);

请注意，当引用命名函数时，它们不包含在引号中（就像使用gulp.task 创建的任务一样）。我添加了done 来表示该任务何时完成，这很重要。

您必须将大部分代码更改为此表单。您的 gulp.task 调用也可以转换为命名函数。所以上面代码的开头可能是：

   function watch_all() {
        gulp.series(….

[虽然不能在函数名中使用:。]