How to use webpack-stream with gulp-inject?

Question

I have two tasks set up. A webpack task and a inject task.

Webpack:

gulp.task('webpack', (done) => {
  gulp.src('./src/app/app.module.js')
    .pipe(plugins.webpack({
      module: {
        loaders: [
          { test: /\.html$/, loaders: ["html"]},
          { test: /\.js$/, exclude: /(node_modules|bower_components)/, loaders: ['babel-loader']}
        ]
      }
    }))
    .pipe(gulp.dest('.tmp/scripts/'))
    done();
})

Inject:

gulp.task('inject', ['webpack'], () => {
  var globalSources = gulp.src(['.tmp/scripts/*.js'], {read: false});
  return gulp.src('src/index.html')
    .pipe(plugins.plumber())
    .pipe(plugins.inject(globalSources, {
      addRootSlash: false,
      addPrefix: '.',
      ignorePath: '.tmp'
    }))
    .pipe(gulp.dest('.tmp/'));
})

I've found that webpack task will say it's done before it's placed the streamed file into the .tmp/scripts folder. Therefore when inject carries on there's no file to inject.

Is webpack-stream outputting it's own callback that's being used before the done()?

Answer 1

You call the done() right after starting the stream, it may look differently because you left off the semi-colon at the end of the stream and you indented done() too much. What you really have is:

gulp.task('webpack', (done) => {
  gulp.src('./src/app/app.module.js')
    .pipe(plugins.webpack(/* config */))
    .pipe(gulp.dest('.tmp/scripts/'));
  done();
})

What you want to do is call done within the stream (at the end of the pipeline). According to the docs for Async task support you can use .on('end', callback) to achieve that. So the full task would look like this:

gulp.task('webpack', (done) => {
  gulp.src('./src/app/app.module.js')
    .pipe(plugins.webpack({
      module: {
        loaders: [
          { test: /\.html$/, loaders: ["html"]},
          { test: /\.js$/, exclude: /(node_modules|bower_components)/, loaders: ['babel-loader']}
        ]
      }
    }))
    .pipe(gulp.dest('.tmp/scripts/'))
    .on('end', done)
})