如何结合吞咽

我正尝试使用gulp-watch和gulp-inject构建我的Node Web应用程序。 但是，一旦吞咽手表参与其中，似乎涉及吞咽注射的构建步骤将不起作用。 表面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/'


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上看到我的完整项目。

---

我最终通过在流中不包含gulp-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']

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

---

希望当你想使用它时，你可以编写一个单独的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()

链接地址: http://www.djcxy.com/p/32921.html

上一篇: How to combine gulp

下一篇: Traceur + browserify + uglyify in gulp