Question

我正在尝试使用gulp-watch和gulp-inject来构建我的Node Web应用。然而，一旦gulp-watch参与其中，似乎涉及gulp-inject的构建步骤不会起作用。看似the reason is that the watch stream never ends and gulp-inject doesn't know when to start。

我的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，而是创建一个单独的＆＃34;手表＆＃34;在源更改时触发构建的任务。我仍然想知道是否有办法使我原来的方法有效。

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']

function defaultBuild() {
  var css = gulp.src(sassSrcSpec)
    .pipe(plumber())
    .pipe(sass({
        includePaths: [
          bowerDir + 'bootstrap-sass-official/assets/stylesheets',
        ]
     }))
    .pipe(gulp.dest('./public/css'))
  var jsxFiles = gulp.src(jsxSrcSpec)
    .pipe(plumber())
    .pipe(react())
    .pipe(gulp.dest('./public/js'))
  var bowerJs = gulp.src(bowerFiles(), {read: false})
  return gulp.src(htmlSrcSpec)
    .pipe(plumber())
    .pipe(inject(css))
    .pipe(inject(bowerJs, {name: 'bower'}))
    .pipe(inject(jsxFiles, {name: 'jsx'}))
    .pipe(gulp.dest('./public/html'))
}

gulp.task('bower', function () {
  return bower()
})

gulp.task('default', defaultBuild)

gulp.task('watch', function () {
  watch(sassSrcSpec.concat(jsxSrcSpec).concat(htmlSrcSpec), function () {
    return defaultBuild()
  })
})

Answer 2

希望您可以在需要时使用单独的gulp-inject功能。

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()

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

2 个答案: