injecting into different places in the same file seems broken
gruppjo opened this issue · 13 comments
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.
+1
+1
+1
Confirmed.
since I upgraded from 1.5.0 to 2.2.0
Exactly the same case.
+1
+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.
+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 -->
After further investigations, the problem seems to be in 2.0.0 release and I guess it is in the commit 9861567
+1
+1
+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.
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.
using starttag still seems to do the trick
gulpfile.js:
.pipe(inject(sources, {ignorePath: 'spec', addRootSlash: false, starttag: '' }))
index.html