gulp-inject not working with event-stream

Question

gulp-inject does not working with event-stream.

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

The result coming like this.

<!-- 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 -->

Unfortunately the mainBowerFiles('**/*.js') do not merge with inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false})))

It's not clear what you actually want to happen. What does your HTML look like before and what do you want it to look like afterwards? — Sven Schoenung, Oct 06 '16 at 12:51
And why do you use `{name:'bower'}` when you don't seem to have a `` section? — Sven Schoenung, Oct 06 '16 at 12:53
@SvenSchoenung even if remove`{name:'bower'}`, the result is the same. please have a look attached screenshot in the question — Mo., Oct 06 '16 at 12:57
@SvenSchoenung I was just following this instruction https://github.com/klei/gulp-inject#injecting-all-files-for-development — Mo., Oct 06 '16 at 13:15
You didn't follow that correctly. That example clearly has a `` section before the `` section. — Sven Schoenung, Oct 06 '16 at 13:22

Sven Schoenung · Accepted Answer · 2016-10-06T13:20:54.120

Your problem is that you're invoking inject() twice with two different sources (the main bower files and the files in resources/app), but you want both sources to be injected into the same section.

What you need to do is call inject() once with the already merged sources:

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

EDIT: If you want to keep the order of the files you can use streamqueue instead of 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'));
});

awesome, it works but the listing is mixed with bower and customjs :( — Mo., Oct 06 '16 at 13:14

gulp-inject not working with event-stream

1 Answers1