gulp-inject無法與事件流一起使用

Question

gulp-inject不適用於事件流。

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var inject = require('gulp-inject');
var es = require('event-stream');

var config = {
    sassDir: './resources/assets/sass',
    jsPath: './resources/app',
    fontDir: './resources/fonts',
    imageDir: './resources/images',
    bowerDir: './bower_components'
};

gulp.task('index', function () {
    return gulp.src('./resources/index.html')
        .pipe(inject(gulp.src(mainBowerFiles('**/*.js'), {read: false}), {name: 'bower'}))
      .pipe(inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false}))))
      .pipe(gulp.dest('./public'));
});

結果是這樣的。

<!-- inject:js -->
<script src="/resources/app/core.js"></script>
<script src="/resources/app/first-folder/01.js"></script>
<script src="/resources/app/second-folder/02.js"></script>
<!-- endinject -->

不幸的是mainBowerFiles('**/*.js')不與inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false})))合並inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false}))) mainBowerFiles('**/*.js') inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false})))

Answer 1

您的問題是，您要使用兩個不同的源（主Bower文件和resources/app的文件inject() 兩次調用inject() ，但是您希望將這兩個源都注入到同一部分中。

您需要對已合並的源調用一次 inject() ：

gulp.task('index', function () {
  return gulp.src('./resources/index.html')
    .pipe(inject(es.merge(
      gulp.src(mainBowerFiles('**/*.js'), {read: false}),
      gulp.src(config.jsPath + '/**/*.js', {read: false})
    )))
    .pipe(gulp.dest('./public'));
});

編輯：如果您想保持文件的順序，可以使用streamqueue而不是es.merge() ：

var streamqueue = require('streamqueue');

gulp.task('index', function () {
  return gulp.src('./resources/index.html')
    .pipe(inject(streamqueue({ objectMode: true },
      gulp.src(mainBowerFiles('**/*.js'), {read: false}),
      gulp.src(config.jsPath + '/**/*.js', {read: false})
    )))
    .pipe(gulp.dest('./public'));
});