How to run Gulp tasks sequentially one after the other

How to run Gulp tasks sequentially one after the other

in the snippet like this:
gulp.task “coffee”, ->
gulp.src(“src/server/**/*.coffee”)
.pipe(coffee {bare: true}).on(“error”,gutil.log)
.pipe(gulp.dest “bin”)

gulp.task “clean”,->
gulp.src(“bin”, {read:false})
.pipe clean
force:true

gulp.task ‘develop’,[‘clean’,’coffee’], ->
console.log “run something else”

In develop task I want to run clean and after it’s done, run coffee and when that’s done, run something else. But I can’t figure that out. This piece doesn’t work. Please advise.

Solutions/Answers:

Solution 1:

It’s not an official release yet, but the coming up Gulp 4.0 lets you easily do synchronous tasks with gulp.series. You can simply do it like this:

gulp.task('develop', gulp.series('clean', 'coffee'))

I found a good blog post introducing how to upgrade and make a use of those neat features:
migrating to gulp 4 by example

Solution 2:

By default, gulp runs tasks simultaneously, unless they have explicit dependencies. This isn’t very useful for tasks like clean, where you don’t want to depend, but you need them to run before everything else.

I wrote the run-sequence plugin specifically to fix this issue with gulp. After you install it, use it like this:

var runSequence = require('run-sequence');

gulp.task('develop', function(done) {
    runSequence('clean', 'coffee', function() {
        console.log('Run something else');
        done();
    });
});

You can read the full instructions on the package README — it also supports running some sets of tasks simultaneously.

Please note, this will be (effectively) fixed in the next major release of gulp, as they are completely eliminating the automatic dependency ordering, and providing tools similar to run-sequence to allow you to manually specify run order how you want.

However, that is a major breaking change, so there’s no reason to wait when you can use run-sequence today.

Solution 3:

The only good solution to this problem can be found in the gulp documentation which can be found here

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
  // do stuff -- async or otherwise
  cb(err); // if err is not null and not undefined, the orchestration will stop, and 'two' will not run
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
  // task 'one' is done now
});

gulp.task('default', ['one', 'two']);
// alternatively: gulp.task('default', ['two']);

Solution 4:

I generated a node/gulp app using the generator-gulp-webapp Yeoman generator. It handled the “clean conundrum” this way (translating to the original tasks mentioned in the question):

gulp.task('develop', ['clean'], function () {
  gulp.start('coffee');
});

Solution 5:

run-sequence is the most clear way (at least until Gulp 4.0 is released)

With run-sequence, your task will look like this:

var sequence = require('run-sequence');
/* ... */
gulp.task('develop', function (done) {
    sequence('clean', 'coffee', done);
});

But if you (for some reason) prefer not using it, gulp.start method will help:

gulp.task('develop', ['clean'], function (done) {
    gulp.on('task_stop', function (event) {
        if (event.task === 'coffee') {
            done();
        }
    });
    gulp.start('coffee');
});

Note: If you only start task without listening to result, develop task will finish earlier than coffee, and that may be confusing.

You may also remove event listener when not needed

gulp.task('develop', ['clean'], function (done) {
    function onFinish(event) {
        if (event.task === 'coffee') {
            gulp.removeListener('task_stop', onFinish);
            done();
        }
    }
    gulp.on('task_stop', onFinish);
    gulp.start('coffee');
});

Consider there is also task_err event you may want to listen to.
task_stop is triggered on successful finish, while task_err appears when there is some error.

You may also wonder why there is no official documentation for gulp.start(). This answer from gulp member explains the things:

gulp.start is undocumented on purpose because it can lead to complicated build files and we don’t want people using it

(source: https://github.com/gulpjs/gulp/issues/426#issuecomment-41208007)

Solution 6:

According to the Gulp docs:

Are your tasks running before the dependencies are complete? Make sure your dependency tasks are correctly using the async run hints: take in a callback or return a promise or event stream.

To run your sequence of tasks synchronously:

  1. Return the event stream (e.g. gulp.src) to gulp.task to inform
    the task of when the stream ends.
  2. Declare task dependencies in the second argument of gulp.task.

See the revised code:

gulp.task "coffee", ->
    return gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean", ['coffee'], ->
      return gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"