[英]How to combine gulp-watch and gulp-inject?
I am trying to use both gulp-watch and gulp-inject to build my Node Web app. 我正在尝试使用gulp-watch和gulp-inject来构建我的Node Web应用程序。 However, it seems that the build step involving gulp-inject won't work once gulp-watch gets involved.
然而,一旦涉及gulp-watch,似乎涉及gulp-inject的构建步骤将无法工作。 Seemingly, the reason is that the
watch
stream never ends and gulp-inject doesn't know when to start . 看起来, 原因是
watch
流永远不会结束,gulp-inject不知道何时开始 。
My gulpfile looks as follows: 我的gulpfile看起来如下:
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? 我怎样才能成功结合gulp-watch和gulp-inject?
You can see my full project on GitHub . 你可以在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. 我最终解决了这个问题,不在流中包含gulp-watch,而是创建一个单独的“监视”任务,当源更改时触发构建。 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. 希望你可以在想要使用时编写单独的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));
}
even you can use a parameter inside the function. 甚至你可以使用函数内部的参数。
calling the function: inject()
调用函数:
inject()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.