如何使用带有 gulp-inject 的 webpack-stream？

Question

我设置了两个任务。一个 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();
})

注入：

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/'));
})

我发现 webpack 任务会在将流文件放入 .tmp/scripts 文件夹之前说它已完成。所以inject进行的时候没有文件可以注入

webpack-stream 是否正在输出它自己的在 done() 之前使用的回调？

Answer 1

您在开始流后立即调用 done()，它看起来可能有所不同，因为您在流末尾省略了分号并且缩进了太多 done()。你真正拥有的是：

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

您想做的是在流中调用 done（在管道的末端）。根据 Async task support 的文档，您可以使用 .on('end', callback) 来实现。所以完整的任务看起来像这样：

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)
})

如何使用带有 gulp-inject 的 webpack-stream？

How to use webpack-stream with gulp-inject?

gulp-inject

webpack