Migrate gulp.start function to Gulp v4

Question

I have been migrating all of my gulp v3 code bases into v4. However I'm stuck at a point where I have gulp start function and it throws me an error when I run gulp start in gulp v4.

This is the function I had in version 3:

gulp.task('default', ['watch'], function () {

    gulp.start('styles', 'scripts', 'images');

});

When migrating to v4 of gulp I implemented this function:

gulp.task('default', gulp.parallel('watch', function(done) {

    gulp.start('styles', 'scripts', 'images');

    done();

}));

How to accomplish the same process with the new gulp version? Do I need to use gulp.parallel inside gulp.series?

score 12 · Answer 1 · answered Oct 31 '18 at 04:05

After changing your tasks to functions, simply use;

gulp.task('default', gulp.series (watch, gulp.parallel(styles, scripts, images),

    function (done) { done(); }    
));

The watch function will run first, then the styles, scripts and images functions in parallel.

From the gulp.series documentation:

There are no imposed limits on the nesting depth of composed operations using series() and parallel().

Mohamed Allal · Answer 2 · 2018-10-30T01:52:22.090

from https://github.com/gulpjs/gulp/issues/755

start is the only way to do what you want in gulp 3 but it was never officially supported by gulp (it was exposed by a dependency) and is completely gone in gulp 4. I don't suggest using it.

It was never intended, and there is no direct equivalent in v4, in fact you need to call directly the function. and it's that simple, everything is function in gulp v4 and we have done() to mark when a task finish (which is too nice).

Let put that clear and write code:

Note you need to name your functions (which will be a global/local variable (depending on the scoop)), you pass it to the task you create, and when you need to start a task, you call the function directly. (gulp.task is only here to expose the tasks functions to the gulp-cli).

example:

// minimizableControllBar
gulp.task('minimizableControllBar_css', minimizableControllBar_css)

function minimizableControllBar_css(done) {
    return gulp.src('./app/js/minimizableControllBar/modules/**/*.css')
        .pipe(concat('presetsAll.css')).on('error', console.log)
        .pipe(gulp.dest('./app/js/minimizableControllBar/'))
    if(done) done(); // this is in order to make the functions usable with and without done
}


gulp.task('minimizableControllBar_jsonPreset', minimizableControllBar_jsonPreset)

function minimizableControllBar_jsonPreset(done) {
    gulp.src('./app/js/minimizableControllBar/modules/**/*.json')
        .pipe(gutil.buffer(function (err, files) {
            let presetAllJsonStr = '{\n'
            let i = 0
            for (i = 0; i < files.length - 1; i++) {
             //.....

        }))
    if(done) done();
}

Here where normally i would used gulp.start() [when setting my watcher]

gulp.task('watch', function (done) {
    // here we tell what we want to watch (we can watch multiple files and even directories you can see /**/*.js (wildcards)  ==> all the folders including . which is current folders, and to watch all the .js files whatever the name)
    watch('./app/js/minimizableControllBar/modules/**/*.json', function () {
        minimizableControllBar_jsonPreset() // in place of gulp.start('minimizableControllBar_jsonPreset')  // Note i kept the same names of task and function, but it can be anything (but still it is a good thing)
    })
    watch('./app/js/minimizableControllBar/modules/**/*.css', function () {
        minimizableControllBar_css() //// in place of gulp.start('minimizableControllBar_css')
    })

    //json comments 
    var base = path.join(__dirname, 'app/tempGulp/json/')
    watch('./app/tempGulp/json/**/*.json', function (evt) {
        // console.log('hi there ');
        jsonCommentWatchEvt = evt
        jsonComment()
    })
    done();
});

Now that's good but! Unless you console.log something, you can't see anything, something that we didn't have to do with gulp.start(). Yea, we have to log our own message. The good news, it's simple with a helper. Here i built one: https://www.npmjs.com/package/gulp-task-logger https://github.com/MohamedLamineAllal/gulpTaskLogger

First import and init (make sure to read the doc):

var TaskLogger = require('gulp-task-logger');
const tl = new TaskLogger(); // with default config (no options)

Here how it's used:

gulp.task('jsonComment', jsonComment);
function jsonComment(done) {
  if (!done) tl.task("jsonComment").startLog(); //<======= log at task start [notice if(!done)! it's to make sure we are only logging ourselves, when we are calling the function ourselves without done! if it's the normal from cli task execution, then the log will happen by gulp]
  jsonComment_Task(jsonCommentWatchEvt, done);
}

Then the task is continuing in another function, no problem, our helper have no problem:

function jsonComment_Task(evt, done) {
    // var dest = path.join(__dirname, 'app/json/', getRelevantPath_usingBase(base, evt.path))
    gulp.src(evt.path, {
        base: './app/tempGulp/json/'
    }).
        pipe(stripJsonComments({ whitespace: false })).on('error', console.log).
        on('data', function (file) { // here we want to manipulate the resulting stream

            var str = file.contents.toString()

            var stream = source(path.basename(file.path))
            stream.end(str.replace(/\n\s*\n/g, '\n\n'))
            stream.
                pipe(gulp.dest('./app/json/')).on('error', console.log)
            if (done) done();//<!!!!================!!!!!!!!!! if done available, we are not calling the function directly, no need to log
            else tl.task('jsonComment').endLog();//<!!!!================!!!!!!!!!! happy ending
        })
}

Another example:

// minimizableControllBar
gulp.task('minimizableControllBar_css', minimizableControllBar_css)//<!!!!================!!!!!!!!!!

function minimizableControllBar_css(done) {//<!!!!================!!!!!!!!!!
  if (!done) tl.task("minimizableControllBar_css").startLog(); //<!!!!================!!!!!!!!!!
  gulp
    .src("./app/js/minimizableControllBar/modules/**/*.css")
    .pipe(concat("presetsAll.css"))
    .on("error", console.log)
    .pipe(gulp.dest("./app/js/minimizableControllBar/"))
    .on("end", () => {
      if (done) done();
        else tl.task("minimizableControllBar_css").endLog();//<!!!!================!!!!!!!!!!
    });
}

So the snippets above are from an actual gulp file i wrote, Within an opensource library project i was working on, not made public yet. You can find the file here: https://github.com/MohamedLamineAllal/ftreeJsGulpFile

Migrate gulp.start function to Gulp v4

2 Answers2

Let put that clear and write code:

Linked