如何结合吞咽手表和吞咽注射？

我正在尝试使用gulp-watch和gulp-inject构build我的Node Web应用程序。 然而，一旦吞噬手表涉及，似乎涉及吞咽注射的构build步骤将不起作用。 表面watch ， 原因在于watchstream不断，注射不知道什么时候开始 。

我的大文件如下所示：

 var gulp = require（'gulp'）
 var inject = require（'gulp-inject'）
 var sass = require（'gulp-sass'）
 var path = require（'path'）
 var bower = require（'gulp-bower'）
 var bowerFiles = require（'main-bower-files'）
 var react = require（'gulp-react'）
 var watch = require（'gulp-watch'）
 var plumber = require（'gulp-plumber'）

 var bowerDir ='./bower_components/'


 gulp.task（'bower'，function（）{
  返回bower（）
 }）

 gulp.task（'default'，function（）{
   var css = watch（'./ stylesheets / *。scss'）
     .pipe（pipe道工（））
     .pipe（SASS（{
 includePaths：[
 bowerDir +'bootstrap-sass-official / assets / stylesheets'，
 ]
 }））
     .pipe（gulp.dest（” ./公共/ CSS'））
   var jsxFiles = watch（['./jsx/ about.js'，'./jsx/home.js'，'./jsx/app.js']）
     .pipe（pipe道工（））
     .pipe（反应（））
     .pipe（gulp.dest（” ./公共/ JS'））
   var bowerJs = gulp.src（bowerFiles（），{read：false}）
  看（ './的意见/ index.html的'）
     .pipe（pipe道工（））
     //不产生输出 - 大概是因为观察源还没有结束它的stream
     .pipe（注入（CSS））
     .pipe（inject（bowerJs，{name：'bower'}））
     .pipe（inject（jsxFiles，{name：'jsx'}））
     .pipe（gulp.dest（ './公共/ HTML'））
 }）

我怎样才能成功地结合吞咽手表和吞咽注射？

你可以在GitHub上看到我的完整项目。

Answer 1

我最终通过在stream中不包括gulp-watch解决了这个问题，而是创build了一个单独的“监视”任务，在源文件发生变化时触发构build。 我仍然想知道是否有办法让我原来的方法工作。

 var gulp = require（'gulp'）
 var inject = require（'gulp-inject'）
 var sass = require（'gulp-sass'）
 var path = require（'path'）
 var bower = require（'gulp-bower'）
 var bowerFiles = require（'main-bower-files'）
 var react = require（'gulp-react'）
 var watch = require（'gulp-watch'）
 var plumber = require（'gulp-plumber'）

 var bowerDir ='./bower_components/'

 var sassSrcSpec = ['./stylesheets/*.scss']
 var jsxSrcSpec = ['./jsx/about.js'，'./jsx/home.js'，'./jsx/app.js']
 var htmlSrcSpec = ['./views/index.html']

函数defaultBuild（）{
   var css = gulp.src（sassSrcSpec）
     .pipe（pipe道工（））
     .pipe（SASS（{
 includePaths：[
 bowerDir +'bootstrap-sass-official / assets / stylesheets'，
 ]
 }））
     .pipe（gulp.dest（” ./公共/ CSS'））
   var jsxFiles = gulp.src（jsxSrcSpec）
     .pipe（pipe道工（））
     .pipe（反应（））
     .pipe（gulp.dest（” ./公共/ JS'））
   var bowerJs = gulp.src（bowerFiles（），{read：false}）
   return gulp.src（htmlSrcSpec）
     .pipe（pipe道工（））
     .pipe（注入（CSS））
     .pipe（inject（bowerJs，{name：'bower'}））
     .pipe（inject（jsxFiles，{name：'jsx'}））
     .pipe（gulp.dest（ './公共/ HTML'））
 }

 gulp.task（'bower'，function（）{
  返回bower（）
 }）

 gulp.task（'default'，defaultBuild）

 gulp.task（'watch'，function（）{
   watch（sassSrcSpec.concat（jsxSrcSpec）.concat（htmlSrcSpec），function（）{
    返回defaultBuild（）
   }）
 }）

Answer 2

希望你可以编写一个单独的gulp注入function，当你想使用它。

 var inject = function(){ var injectStyles = gulp.src('path/*.css', { read: false }); var injectScripts = gulp.src('path/*.js'); return gulp.src('path/index.html') .pipe($.inject(injectStyles, { relative: true })) .pipe($.inject(injectScripts, { relative: true })) .pipe(gulp.dest(myPath)); } 

即使你可以使用函数内的参数。

调用函数： inject()