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

我正在尝试使用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上看到我的完整项目。

       

网上收集的解决方案 "如何结合吞咽手表和吞咽注射?"

我最终通过在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()
   })
 })

希望你可以编写一个单独的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()