# javascript – How to run Gulp tasks sequentially one after the other

## The Question :

403 people think this question is useful

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

.pipe clean
force:true

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.

• The run-sequence npm module fixes this problem now – all other answers are now irrelevant – see OverZealous’s answer below
• Gulp 4.0 natively supports running tasks in sequence, rendering run-sequence obsolete – see massanishi’s answer below
• Gulp4 breaks more things than it fixes, it would seem. After battling with it for a few hours, I am back to 3.9.1. I realize major versions can/will break backcompat but with cryptic and useless error messages, i say no thanks. v4 is not ready.

127 people think this answer is useful

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

413 people think this answer is useful

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');

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.

372 people think this answer is useful

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

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
// 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
// task 'one' is done now
});



56 people think this answer is useful

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



32 people think this answer is useful

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

var sequence = require('run-sequence');
/* ... */
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) {
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) {
done();
}
}
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

26 people think this answer is useful

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.

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

.pipe clean
force:true

console.log "run something else"



10 people think this answer is useful

I was having this exact same problem and the solution turned out to be pretty easy for me. Basically change your code to the following and it should work. NOTE: the return before gulp.src made all the difference for me.

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

.pipe clean
force:true

console.log "run something else"



8 people think this answer is useful

tried all proposed solutions, all seem to have issues of their own.

If you actually look into the Orchestrator source, particularly the .start() implementation you will see that if the last parameter is a function it will treat it as a callback.

I wrote this snippet for my own tasks:

  gulp.task( 'task1', () => console.log(a) )

console.log( ${task} finished ); runSequential( tasks.slice(1) ); } ); } gulp.task( "run-all", () => runSequential([ "task1", "task2", "task3", "task4", "task5" ));  ## The Answer 9 4 people think this answer is useful I was searching for this answer for a while. Now I got it in the official gulp documentation. If you want to perform a gulp task when the last one is complete, you have to return a stream: gulp.task('wiredep', ['dev-jade'], function () { var stream = gulp.src(paths.output + '*.html') .pipe($.wiredep())
.pipe(gulp.dest(paths.output));

return stream; // execute next task when this is completed
});

// First will execute and complete wiredep task
gulp.src(paths.output + '**/*.html')
.pipe(\$.minifyHtml())
.pipe(gulp.dest(paths.output));
});


3 people think this answer is useful

Simply make coffee depend on clean, and develop depend on coffee:

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



Dispatch is now serial: cleancoffeedevelop. Note that clean‘s implementation and coffee‘s implementation must accept a callback, “so the engine knows when it’ll be done”:

gulp.task('clean', function(callback){
del(['dist/*'], callback);
});



In conclusion, below is a simple gulp pattern for a synchronous clean followed by asynchronous build dependencies:

//build sub-tasks
...

gulp.task('build', ['foo', 'baz', 'bar', ...], function(){...})



Gulp is smart enough to run clean exactly once per build, no matter how many of build‘s dependencies depend on clean. As written above, clean is a synchronization barrier, then all of build‘s dependencies run in parallel, then build runs.

3 people think this answer is useful

For me it was not running the minify task after concatenation as it expects concatenated input and it was not generated some times.

I tried adding to a default task in execution order and it didn’t worked. It worked after adding just a return for each tasks and getting the minification inside gulp.start() like below.

/**
* Concatenate JavaScripts
*/
return gulp.src([
'js/jquery.js',
'js/jquery-ui.js',
'js/bootstrap.js',
'js/jquery.onepage-scroll.js',
'js/script.js'])
.pipe(maps.init())
.pipe(concat('ux.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('dist/js'));
});

/**
* Minify JavaScript
*/
return gulp.src('dist/js/ux.js')
.pipe(uglify())
.pipe(rename('ux.min.js'))
.pipe(gulp.dest('dist/js'));
});

gulp.start('minify-js');
});



2 people think this answer is useful

Gulp and Node use promises.

So you can do this:

// ... require gulp, del, etc

return del('./dist/');
}

return gulp.src([...])
.pipe(...)
.pipe(gulp.dest('...'));
}

return gulp.src([...])
.pipe(...)
.pipe(gulp.dest('...'));
}

return gulp.src([...])
.pipe(...)
.pipe(gulp.dest('...'));
}

// 1. Run the clean task
// 2. Clean is complete. Now run two tasks in parallel
Promise.all([
]).then(function () {
});
});
});



If you return the gulp stream, you can use the then() method to add a callback. Alternately, you can use Node’s native Promise to create your own promises. Here I use Promise.all() to have one callback that fires when all the promises resolve.

0 people think this answer is useful

To wait and see if the task is finished and then the rest, I have it this way:

gulp.task('default',
gulp.series('set_env', gulp.parallel('build_scss', 'minify_js', 'minify_ts', 'minify_html', 'browser_sync_func', 'watch'),
function () {
}));



var wait = 0; // flag to signal thread that task is done