Gulp tasks not running in series

Question

I'm following the official docs, but my gulp tasks aren't running in series.

gulp.task("mytask", ["foo", "bar", "baz"]);

gulp.task("foo", function (callback) {
  gulp
    .src("...")
    .pipe(changed("..."))
    .pipe(gulp.dest(function (file) {
      // ...stuff
      return "...";
    }))
    .on("end", function() {
      // ...stuff
      callback();
    });
});

gulp.task("bar", function (callback) {
  //...
});

gulp.task("baz", function (callback) {
  //...
});

But my output looks like this:

Starting 'mytask'...
Starting 'foo'...
Starting 'bar'...                   // <-- foo is not done yet!
Finished 'foo'
Finished 'bar'
Starting 'baz'...
Finished 'baz'
Finished 'mytask'

How do I get them to run in order?

Answer 1

If you want them to run in series you currently have to use the task dependency system, e.g.:

gulp.task("mytask", ["foo", "bar", "baz"]);

gulp.task("foo", function (callback) {
  //...
  callback(...);
});

gulp.task("bar", ['foo'], function (callback) {
  //...
  callback(...);
});

gulp.task("baz", ['bar'], function (callback) {
  //...
  callback(...);
});

It's clunky. I think it's going to be addressed in a future version.

Depending on the situation you could return a promise or event stream instead of passing in and calling a callback.

I suppose I should mention that the run-sequence module is an option as of right now. But the task dependency system illustrated above is the mechanism currently provided by gulp itself. See this comment re: run-sequence and the future of task sequencing in gulp.