Search code examples
javascriptgulpbrowserifyglob

Gulp stream finishes before file is written

Our build process runs our app.js through browserify to handle the require() statements, then concatenates the result with some other scripts to create scripts.js. This is done in two separate tasks.

For some reason the first task ends before it writes the files, causing app.js to be left out of the build. The task was copied from this Gulp recipe with minimal modifications.

Here are the relevant parts of our gulpfile:

gulp.task('scripts', ['angular', 'views-js'], function () {
  var bundledStream = through();

  bundledStream
      .pipe(source('app.js'))
      .pipe(buffer())
      .pipe(debug())
      .pipe(uglify())
      .on('error', gutil.log)
      .pipe(sourcemaps.write(paths.target))
      .pipe(gulp.dest(paths.target));

  globby([paths.scripts], function(err, entries) {
    if (err) {
      bundledStream.emit('error', err);
      return;
    }

    var b = browserify({
      entries: entries,
      debug: true,
    });

    b.bundle().pipe(bundledStream);
  });

  return bundledStream;
});

// Take all the scripts in the target directory and concatenate them to scripts.js.
gulp.task('scripts-all', ['scripts'], function () {
  return gulp.src([path.join(paths.target, '*.js'), '!'+path.join(paths.target, 'scripts.js')])
  .pipe(debug())
  .pipe(concat('scripts.js'))
  .pipe(header(banner, { pkg : pkg } ))
  .pipe(gulp.dest(paths.target))
  .pipe(livereload(reloadServer));
});

This is what happens when we build. Note that the .debug() pipe is executed after the task is finished. This causes the file to miss the .src() scan in scripts-all.

[16:57:46] Starting 'scripts'...
[16:57:46] Finished 'views' after 835 ms
[16:57:47] Finished 'scripts' after 749 ms
[16:57:47] Starting 'scripts-all'...
[16:57:47] gulp-debug: (2015-09-28 13:57:47 UTC)

File
cwd:      ~/projects/ourProject
base:     ~/projects/ourProject
path:     ~/projects/ourProject/app.js
contents: (function e(t,n,r){function s(o,u){if(!n...

[16:57:48] gulp-debug: end event fired (2015-09-28 13:57:48 UTC)

What are we doing wrong?

Solution

  • I don't know globby but the documentation says it returns a promise. My guess is the promise will be resolved when it finishes and returns from the function you passed in. It may be you need to return the promise to keep the task from completing.

    If that does not resolve this, I would try creating your own promise and resolving it in the 'end' event handler for bundledStream since it looks like you want to resolve the task when bundledStream has finished its work.

    var Q = require('q');

gulp.task('scripts', ['angular', 'views-js'], function () {
  var bundledStream = through();

  var deferred = Q.defer();

  bundledStream
      .pipe(source('app.js'))
      .pipe(buffer())
      .pipe(debug())
      .pipe(uglify())
      .on('error', gutil.log)
      .pipe(sourcemaps.write(paths.target))
      .pipe(gulp.dest(paths.target))
      .on('end', function()
        {
        deferred.resolve();
        });
....
  return deferred.promise;

    I have not tested your particular task but this is how I handled a similar problem yesterday.