7

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

我的 gulpfile 如下所示：

var gulp = 需要（'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 水管工 = 要求（'gulp-水管工'）

var bowerDir = './bower_components/'


gulp.task('凉亭', function () {
  返回凉亭（）
})

gulp.task('default', function () {
  var css = watch('./stylesheets/*.scss')
    .pipe（管道工（））
    .pipe（萨斯（{

       包括路径：[

         bowerDir + 'bootstrap-sass-official/assets/stylesheets',

       ]

    }))
    .pipe(gulp.dest('./public/css'))
  var jsxFiles = watch(['./jsx/about.js', './jsx/home.js', './jsx/app.js'])
    .pipe（管道工（））
    .pipe（反应（））
    .pipe(gulp.dest('./public/js'))
  var bowerJs = gulp.src(bowerFiles(), {read: false})
  观看（'./views/index.html'）
    .pipe（管道工（））
    // 不产生输出 - 大概是因为 watch source 没有结束它的流
    .pipe（注入（css））
    .pipe(注入(bowerJs, {name: 'bower'}))
    .pipe(注入(jsxFiles, {name: 'jsx'}))
    .pipe(gulp.dest('./public/html'))
})

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

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

4

2 回答 2

4

我最终通过不在流中包含 gulp-watch 来解决该问题，而是创建了一个单独的“监视”任务，该任务在源更改时触发构建。我仍然想知道是否有办法让我原来的方法奏效。

var gulp = 需要（'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 水管工 = 要求（'gulp-水管工'）

var bowerDir = './bower_components/'

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

功能默认构建（）{
  var css = gulp.src(sassSrcSpec)
    .pipe（管道工（））
    .pipe（萨斯（{

       包括路径：[

         bowerDir + 'bootstrap-sass-official/assets/stylesheets',

       ]

    }))
    .pipe(gulp.dest('./public/css'))
  var jsxFiles = gulp.src(jsxSrcSpec)
    .pipe（管道工（））
    .pipe（反应（））
    .pipe(gulp.dest('./public/js'))
  var bowerJs = gulp.src(bowerFiles(), {read: false})
  返回 gulp.src(htmlSrcSpec)
    .pipe（管道工（））
    .pipe（注入（css））
    .pipe(注入(bowerJs, {name: 'bower'}))
    .pipe(注入(jsxFiles, {name: 'jsx'}))
    .pipe(gulp.dest('./public/html'))
}

gulp.task('凉亭', function () {
  返回凉亭（）
})

gulp.task('default', defaultBuild)

gulp.task('watch', function () {
  观看（sassSrcSpec.concat（jsxSrcSpec）.concat（htmlSrcSpec），函数（）{
    返回默认构建（）
  })
})
于 2014-11-21T10:33:20.703 回答
1

希望您可以在需要时编写一个单独的 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()

于 2017-10-06T11:10:47.633 回答