How do I force gulp calls to run synchronously?

Question

I want the gulp calls below to run synchronously, one after the other. But they do not follow an order.

The run-sequence node module doesn't help here, as I'm not trying to run gulp tasks in series (i.e. it has syntax similar to gulp.task("mytask", ["foo", "bar", "baz"] etc.), but rather gulp "calls" in series, as you see below.

gulp.task("dostuff", function (callback) {

  gulp
    .src("...")
    .pipe(gulp.dest("...");

  gulp
    .src("...")
    .pipe(gulp.dest("...");

  gulp
    .src("...")
    .pipe(gulp.dest("...");

  callback();
});

How do I make them run one after the other?

Answer 1

Well, it's just streams so you could listen for the end event (Watch out for the pyramid of doom!)

gulp.task("dostuff", function (callback) {

  gulp
    .src("...")
    .pipe(gulp.dest("..."))
    .on('end', function () {

      gulp
        .src("...")
        .pipe(gulp.dest("..."))
        .on('end', function () {

          gulp
            .src("...")
            .pipe(gulp.dest("..."))
            .on('end', callback);

        });
    });
});

But it's probably a better pattern to split it up in multiple tasks each one with a dependency on the previous one.

Answer 2

You can use async as a control flow for your calls to get them in only one task, also avoiding you to get a "pyramid effect". So something like this should be good for your use-case:

var async = require('async');

gulp.task('yeah', function (cb) {
  async.series([
    function (next) {
      gulp.src('...')
        .pipe(gulp.dest('...')
        .on('end', next);
    },
    function (next) {
      gulp.src('...')
        .pipe(gulp.dest('...')
        .on('end', next);
    },
    function (next) {
      gulp.src('...')
        .pipe(gulp.dest('...')
        .on('end', next);
    }
  ], cb);
});

That will also allow you to have some error handling and target better where a problem occured.

Answer 3

run-sequence:

Runs a sequence of gulp tasks in the specified order. This function is designed to solve the situation where you have defined run-order, but choose not to or cannot use dependencies.

npm install --save-dev run-sequence

// runSequence will ensure this task will run the following tasks in the listed order
gulp.task('things-to-do', callback => runSequence(
    'clean-up-workspace', // clean up before copying new files
    'copy-new-files', // wait till copy-new-files done before linting
    'lint', // wait till lint is done before running minify
    'minify', // wait till minify is done before starting laundry and dinner
    ['do-laundry', // do laundry and cook dinner at the same time
    'cook-dinner'],
    'bath-cat', // don't bath the cat till both laundry and dinner are done
    callback
));

https://www.npmjs.com/package/run-sequence

Answer 4

Use synchronous mode for glob

Then return the result of gulp.src:

gulp.task('render', function() {
    var appJsFiles = _.map(glob.sync('src/**/*.js'), function(f) {
        return f.slice(6);
    });
    // Render the file.
    return gulp.src('src/template.html')
        .pipe(template({
            scripts: appJsFiles,
            styles: ['style1.css', 'style2.css', 'style3.css']
        }))
        .pipe(gulp.dest(config.build_dir));
});

Answer 5

you can add something like this after the last pipe

.pipe(gulp.dest(FINAL_DEST))
.on('end', () => gulp.src(['build']) .pipe(clean()))