如何结合gulp-watch和gulp-inject？

Question

我正在尝试使用gulp-watch和gulp-inject来构建我的Node Web应用程序.然而,一旦涉及gulp-watch,似乎涉及gulp-inject的构建步骤将无法工作.看起来,原因是watch流不会结束,gulp-inject不知道何时开始.

我的gulpfile看起来如下:

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'))
})

我怎样才能成功结合gulp-watch和gulp-inject？

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

Answer 1

最后，我通过不在流中包括gulp-watch来解决此问题，而是创建了一个单独的“ watch”任务，该任务会在源更改时触发构建。我仍然想知道是否有办法使我的原始方法起作用。

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（sass（{
？includePaths：[
？bowerDir +'bootstrap-sass-official / assets / stylesheets'，
？]
？}））
    .pipe（gulp.dest（'./ public / css'））
  var jsxFiles = gulp.src（jsxSrcSpec）
    .pipe（水管工（））
    .pipe（react（））
    .pipe（gulp.dest（'./ public / js'））
  var bowerJs = gulp.src（bowerFiles（），{read：false}）
  返回gulp.src（htmlSrcSpec）
    .pipe（水管工（））
    .pipe（注入（css））
    .pipe（inject（bowerJs，{name：'bower'}））
    .pipe（inject（jsxFiles，{name：'jsx'}））
    .pipe（gulp.dest（'./ public / html'））
}

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

gulp.task（'default'，defaultBuild）

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