2

I've had to upgrade an old project from gulp version 3.9.1 to gulp version 4 which required me to rewrite my tasks. I've followed the documentation for moving to gulp.series and moving to name functions but I am now still getting errors on run. Below is my code which I use for watching styles in two different languages.

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

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

function watch_AllDesktop(done){
    gulp.series(desktop_styles, desktop_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
        done();
    });

function watch_desk_desktop_styles_rtl(done){
    gulp.series(desktop_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
        done();
    });

function watch_desktop_en(done){
    gulp.series(desktop_styles, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
    });

function watch_mobile_rtl(done){
    gulp.series(mobile_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
        done();
    });

function watch_mobile_en(done){
    gulp.series(mobile_styles, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
        done();
    });

function watch_AllMobile(done){
    gulp.series(mobile_styles, mobile_styles_rtl, function() {
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
        gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
        done();
    });

When I run "gulp watch_all" I get Task never defined. Is there something wrong with the functions or my code order?

whatiscode
  • 45
  • 7

1 Answers1

1
  1. All your functions from watch_AllDesktop to watch_AllMobile need a closing bracket }

  2. Your main Problem is, that you don't export your task


Intern tasks no needed to export, but all your tasks, which should be runable per console must have an export.

Put for example following export at the end of the gulpfile.js:

exports.watch_all = watch_all;


After the export you can proof with gulp --tasks which tasks are available for you


edit (comment question)

Your watch should have no callback, because the watching should run permanent and not only once.

function watch_all(){
    gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles, mobile_styles_rtl, desktop_styles, desktop_styles_rtl ));
}

For further questions, please open new question with small examples and the affected code. thx

d-h-e
  • 2,478
  • 1
  • 10
  • 18
  • Thanks for the reply! That did indeed fix my syntax error however I still have errors when I run the task. I first got the "Did you forget to signal async completion?" error which I fixed by adding another callback in my function. However when I run the task it completes and ends. It does not continuously watch my sass files for any changes and further more when I make changes to any sass file, the css doesn't get regenerated...not sure what's happening with the watch tasks:/ This is my updated code: https://jsfiddle.net/hrukegx1/ – whatiscode Mar 21 '19 at 11:12
  • 1
    That worked perfectly :) Thank you for the fix and showing me how to condense it as well; I was stuck on this for quite some time! – whatiscode Mar 21 '19 at 13:14