꺽쇠 시계와 꿀꺽 밥 주입 방법을 결합하는 방법은 무엇입니까?

Question

내 노드 웹 응용 프로그램을 빌드하는 데 gulp-watch과 gulp-inject을 모두 사용하려고합니다. 그러나 꿀꺽 꿀꺽 마심을 포함하는 빌드 단계는 꿀꺽 꿀꺽 마심이 개입되면 작동하지 않습니다. 겉으로보기에는 the reason is that the watch stream never ends and gulp-inject doesn't know when to start입니다.

내가 성공적으로 꿀꺽 시계를 결합하여 어떻게

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

꿀꺽-주입 다음과 같이

내 gulpfile 보인다?

GitHub에서 전체 프로젝트를 볼 수 있습니다.

Answer 1

스트림에서 gulp-watch를 포함하지 않고 대신 소스가 변경 될 때 빌드를 트리거하는 별도의 "watch"태스크를 작성하여 문제를 해결했습니다. 그래도 원래의 접근 방식을 사용할 수있는 방법이 있는지 알고 싶습니다.

 
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

당신이 그것을 사용하고 싶을 때 별도의 껌 주입 기능을 쓸 수 있기를 바랍니다.

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()