如何使用webpack-stream与gulp-inject？

Question

我有两个任务设置。一个webpack任务和一个注入任务。

的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 /脚本文件夹之前。因此，当注射进行时，没有文件要注入。

是webpack流输出它自己的回调，正在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(); 
}) 

你想要做的是在流内（在管道末端）完成调用。根据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) 
})