injecting into different places in the same file seems broken

[gruppjo]

I've been injecting different files from different streams into different injection blocks of the same file as described here: https://github.com/klei/gulp-inject#injecting-some-files-into-head-and-some-into-body.

However this doesn't work as expected anymore since I upgraded from 1.5.0 to 2.2.0, neither did I find a way to fix it. It appears that the injections from the first inject are overwritten by the latter.

Here's a simplified example:

gulp.task('inject-all', function () {

  return gulp.src('app/index.html')
    .pipe(
      $.inject( // app/**/*.js files
        gulp.src(paths.jsFiles)))
    .pipe(
      $.inject( // inject compiled css
        gulp.src('.tmp/*/styles/*.css', {read: false})))
    .pipe(gulp.dest('app'));
});

While with version 1.5.0 this produced the following output in the index.html:

<!-- inject:css -->
<link rel="stylesheet" href="blank/styles/blank.css">
<link rel="stylesheet" href="main/styles/main.css">
<link rel="stylesheet" href="side/styles/side.css">
<!-- endinject -->
...

<!-- inject:js -->
<script src="app.js"></script>
<script src="side/side.js"></script>
...
<!-- endinject -->

With version 2.2.0 the output is:

<!-- inject:css -->
<link rel="stylesheet" href="blank/styles/blank.css">
<link rel="stylesheet" href="main/styles/main.css">
<link rel="stylesheet" href="side/styles/side.css">
<!-- endinject -->
...

<!-- inject:js -->
<!-- endinject -->

Anyone else experiencing this issue? This keeps me from upgrading to the new version.

[xAlexo]

+1

[esetnik]

+1

[casoninabox]

+1

[zckrs]

Confirmed.

since I upgraded from 1.5.0 to 2.2.0

Exactly the same case.

[sdornan]

+1

[chris-verclytte]

+1

At the moment, you can bypass the problem by using custom name like this:

.pipe(
      $.inject( // app/**/*.js files
        gulp.src(paths.jsFiles), {name: 'custom-name'}))

and following HTML markup :

<!-- custom-name:js -->
<!-- endinject -->

Even if it is not "clean", it does the work.

[akanass]

+1

And the code, to fix it, is :

var gulp = require('gulp'),
    inject = require('gulp-inject');

gulp.task('injector:js', function ()
{
   return gulp.src('client/views/layout/layout.html')
    .pipe(inject(gulp.src('.tmp/static/scripts/**/*.js'), {
      ignorePath: '.tmp',
      addRootSlash: false,
      name: 'fix-inject'
    }))
    .pipe(gulp.dest('client/views/layout/'))
});

and following HTML markup:

<!-- fix-inject:js -->
<!-- endinject -->

[chris-verclytte]

After further investigations, the problem seems to be in 2.0.0 release and I guess it is in the commit 9861567

[morioust]

+1

[joshwiens]

+1

[lastralla]

+1

Dunno, using a custom name didn't worked for me. Tried using 1.5.0, didn't work. Even tried 1.3.0, didn't work.

Any chance it's something down stream? Only 2 dependencies, "gulp-util" and "event-stream". Haven't really looked at the source to try and figure it out.

[joakimbeng]

I were afraid of this which was why I hesitated to implement an emptying feature as requested in #59 , #77 , #114 and #128. But had forgotten about it when I decided to implement it in the 2.0 release.

Using the name option as mentioned is a workaround for the moment (and those of you experiencing problems with that have you double checked that you're passing the option to inject and not to gulp.src?).

I will hide the emptying feature behind an empty option for a 3.0 release to address this.

[HNeukermans]

using starttag still seems to do the trick

gulpfile.js:
.pipe(inject(sources, {ignorePath: 'spec', addRootSlash: false, starttag: '' }))

index.html