Making gulp write files synchronously before moving on to the next task

Spread the love

Question Description

gulpfile.js

gulp.task('browser-bundle', ['react'], function() {
...

});


gulp.task('react', function(){
  gulp.src(options.JSX_SOURCE)
      .pipe(react())
      .pipe(gulp.dest(options.JSX_DEST))
});

As you can see I have the browser-bundle task depending on the react task. I believe this works as expected because in the output I see this:

[gulp] Running 'react'...
[gulp] Finished 'react' in 3.43 ms
[gulp] Running 'browser-bundle'...

However, although the react task is finished, the files its supposed to write to the operating system are not quite there yet. I’ve notice that if I put a sleep statement in the browser bundle command then it works as expected, however this seems a little hacky to me.

If I want the react task to not be considered finished until the files (from gulp.dest) have been synchronously written to disk how would I do that?

Practice As Follows

You need a return statement:

gulp.task('react', function(){
    return gulp.src(options.JSX_SOURCE)
        .pipe(react())
        .pipe(gulp.dest(options.JSX_DEST))
});

With this all my write operations are done before the next task processed.

Leave a Comment