gulp-inject 不适用于事件流答案

【问题标题】：gulp-inject not working with event-streamgulp-inject 不适用于事件流
【发布时间】：2016-10-06 12:19:09
【问题描述】：

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}))) 合并

【问题讨论】：

不清楚你真正想要发生什么。您的 HTML 之前是什么样的，之后您希望它是什么样的？
当您似乎没有 部分时，为什么还要使用{name:'bower'}？
@SvenSchoenung 即使删除{name:'bower'}，结果也是一样的。请看问题中附上的截图
@SvenSchoenung HTML 之前看起来像这样 
您没有正确遵循。该示例显然在 部分之前有一个 部分。

标签： javascript gulp bower gulp-inject event-stream

【解决方案1】：

您的问题是您使用两个不同的源（主 bower 文件和 resources/app 中的文件）调用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'));
});

【讨论】：

太棒了，它可以工作，但列表中混杂了 bower 和 customjs :(