Wie man Schluckuhr und Schluckinjektion kombiniert?

Question

Ich versuche sowohl gulp-watch als auch gulp-inject zu verwenden, um meine Node Web App zu erstellen. Es scheint jedoch, dass der Build-Schritt mit Gulp-inject nicht funktioniert, sobald gulp-watch involviert ist. Scheinbar, the reason is that the watch stream never ends and gulp-inject doesn't know when to start.

Mein gulpfile sieht wie folgt aus:

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

Wie kann ich erfolgreich schluck-watch kombinieren und schlucke-spritzen?

Sie können mein ganzes Projekt auf GitHub sehen.

Answer 1

Ich habe am Ende um das Problem herum gearbeitet, indem ich in den Streams nicht gulp-watch einschloss und stattdessen eine separate "watch" -Aufgabe erstellte, die einen Build auslöst, wenn sich die Quellen ändern. Ich würde immer noch gerne wissen, ob es einen Weg gibt, meine ursprüngliche Herangehensweise funktionieren zu lassen.

 
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

hoffen, dass Sie eine separate Schluck-Funktion inject schreiben kann, wann immer Sie es verwenden möchten.

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

selbst können Sie einen Parameter in der Funktion verwenden.

Aufruf der Funktion: inject()