Error with converting gulp scripts from V3 to V4

Question

I am updating to gulp4 from 3.9.1 on an old project. Due to the upgrade I've had to rewrite the tasks as per the documentation. I've switched to name functions and I am using gulp.series but I am getting errors such as:

AssertionError [ERR_ASSERTION]: Task never defined: mobile_styles

Below is my gulp file. It consists mostly of watch scripts for two languages on desktop and mobile

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"]);
    })
);

Can someone help me with troubleshooting this? Should I switch to gulp.parallels for the tasks or am I refactoring this the wrong way?

Answer 1

All of your watches should be of the form:

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

So, for example, change to:

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();
        }
    )
);

Note that when referring to named functions they are not enclosed in quotes (as a task created with gulp.task would be). And I added the done to signal when that task has completed which will be important.

You have to change much of your code to this form. And your gulp.task calls could be converted to named functions as well. So the beginning of the above code could be:

   function watch_all() {
        gulp.series(….

[can't use the : in a function name though.]