How to combine gulp -watch and gulp -ject?

Question

I am trying to use gulp-watch and gulp-inject to build my Node Web application. However, it seems that the build step involving gulp -inject will not work after gulp -watch is involved. Apparently, the reason is that the watch thread never ends, and gulp -inject does not know when to start .

My gulpfile is 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 complete project on GitHub .

Answer 1

As a result, I ran into a problem, not including gulp -watch in streams, and instead created a separate “watch” task that starts the build when sources change. I would still like to know if there is a way to make my original approach work.

  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 whenever 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 the parameter inside the function.

function call: inject()