How to combine gulp-watch and gulp-inject?

Question

I am trying to use both gulp-watch and gulp-inject 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, the reason is that the watch stream never ends and gulp-inject doesn't know when to start.

My gulpfile looks as follows:

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

How can I successfully combine gulp-watch and gulp-inject?

You can see my full project on GitHub.

Answer 1

I ended up working around the issue by not including gulp-watch in the streams, and instead creating a separate "watch" task which triggers a build when sources change. I'd still like to know if there's a way to make my original approach work though.

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

hope you can write a separate gulp-inject function when ever you want to use it.

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

even you can use a parameter inside the function.

calling the function: inject()