How to combine gulp
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.
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() }) })
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()
上一篇: gulp browserify reactify任务相当缓慢
下一篇: 如何结合吞咽