将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(….

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