如何使用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) 
})