如何结合 gulp-watch 和 gulp-inject？答案

【问题标题】：How to combine gulp-watch and gulp-inject?如何结合 gulp-watch 和 gulp-inject？
【发布时间】：2015-01-18 18:45:09
【问题描述】：

我正在尝试同时使用 gulp-watch 和 gulp-inject 来构建我的 Node Web 应用程序。但是，一旦涉及 gulp-watch，涉及 gulp-inject 的构建步骤似乎将无法工作。貌似是the reason is that the watch stream never ends and gulp-inject doesn't know when to start。

我的 gulpfile 如下所示：

var gulp = 需要（'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 水管工 = 要求（'gulp-水管工'） var bowerDir = './bower_components/' gulp.task('凉亭', function () { 返回凉亭（） }) gulp.task('default', function () { var css = watch('./stylesheets/*.scss') .pipe（管道工（）） .pipe（萨斯（{ 包括路径：[ bowerDir + 'bootstrap-sass-official/assets/stylesheets', ] })) .pipe(gulp.dest('./public/css')) var jsxFiles = watch(['./jsx/about.js', './jsx/home.js', './jsx/app.js']) .pipe（管道工（）） .pipe（反应（）） .pipe(gulp.dest('./public/js')) var bowerJs = gulp.src(bowerFiles(), {read: false}) 观看（'./views/index.html'） .pipe（管道工（）） // 不产生输出 - 大概是因为 watch source 没有结束它的流 .pipe（注入（css）） .pipe(注入(bowerJs, {name: 'bower'})) .pipe(注入(jsxFiles, {name: 'jsx'})) .pipe(gulp.dest('./public/html')) })

如何成功结合 gulp-watch 和 gulp-inject？

您可以在 GitHub 上查看我的完整项目。

【问题讨论】：

标签： javascript node.js gulp gulp-watch gulp-inject

【解决方案1】：

我最终通过不在流中包含 gulp-watch 来解决此问题，而是创建了一个单独的“监视”任务，该任务在源更改时触发构建。不过，我仍然想知道是否有办法让我原来的方法奏效。

var gulp = 需要（'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 水管工 = 要求（'gulp-水管工'） var bowerDir = './bower_components/' var sassSrcSpec = ['./stylesheets/*.scss'] var jsxSrcSpec = ['./jsx/about.js', './jsx/home.js', './jsx/app.js'] var htmlSrcSpec = ['./views/index.html'] 功能默认构建（）{ var css = gulp.src(sassSrcSpec) .pipe（管道工（）） .pipe（萨斯（{ 包括路径：[ bowerDir + 'bootstrap-sass-official/assets/stylesheets', ] })) .pipe(gulp.dest('./public/css')) var jsxFiles = gulp.src(jsxSrcSpec) .pipe（管道工（）） .pipe（反应（）） .pipe(gulp.dest('./public/js')) var bowerJs = gulp.src(bowerFiles(), {read: false}) 返回 gulp.src(htmlSrcSpec) .pipe（管道工（）） .pipe（注入（css）） .pipe(注入(bowerJs, {name: 'bower'})) .pipe(注入(jsxFiles, {name: 'jsx'})) .pipe(gulp.dest('./public/html')) } gulp.task('凉亭', function () { 返回凉亭（） }) gulp.task('default', defaultBuild) gulp.task('watch', function () { 观看（sassSrcSpec.concat（jsxSrcSpec）.concat（htmlSrcSpec），函数（）{ 返回默认构建（） }) })

【讨论】：

【解决方案2】：

希望您可以在需要时编写一个单独的 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()

【讨论】：