title: How to combine gulp-watch and gulp-inject?
body: <p>I am trying to use both <a href="https://www.npmjs.org/package/gulp-watch">gulp-watch</a> and <a href="https://www.npmjs.org/package/gulp-inject">gulp-inject</a> to build my Node Web app. However, it seems that the build step involving gulp-inject won't work once gulp-watch gets involved. Seemingly, <a href="https://github.com/klei/gulp-inject/issues/31">the reason is that the <code>watch</code> stream never ends and gulp-inject doesn't know when to start</a>.</p>
  
  <p>My gulpfile looks as follows:</p>
  
  <pre>
  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 () {
    return bower()
  })
  
  gulp.task('default', function () {
    var css = watch('./stylesheets/*.scss')
      .pipe(plumber())
      .pipe(sass({
          includePaths: [
            bowerDir + 'bootstrap-sass-official/assets/stylesheets',
          ]
       }))
      .pipe(gulp.dest('./public/css'))
    var jsxFiles = watch(['./jsx/about.js', './jsx/home.js', './jsx/app.js'])
      .pipe(plumber())
      .pipe(react())
      .pipe(gulp.dest('./public/js'))
    var bowerJs = gulp.src(bowerFiles(), {read: false})
    watch('./views/index.html')
      .pipe(plumber())
      // Does not produce output - presumably because watch source hasn't ended its stream
      .pipe(inject(css))
      .pipe(inject(bowerJs, {name: 'bower'}))
      .pipe(inject(jsxFiles, {name: 'jsx'}))
      .pipe(gulp.dest('./public/html'))
  })
  </pre>
  
  <p>How can I successfully combine gulp-watch and gulp-inject?</p>
  
  <p>You can see my full project on <a href="https://github.com/aknuds1/chuckdemos/tree/gulp-watch">GitHub</a>.</p>