Doesn't remove injections when stream is empty

Hi, I’m using gulp-inject to inject some files ./app/scripts/**/*.js into my index.html. When gulp finds files, the plugin works as expected and injects all files. But when I remove all files from the filesystem the files aren’t removed in the index.html. I experimented a little bit and found out that when at least one file is in the stream the plugin correctly removes all others. When I remove the last file, the index.html remains untouched resulting in 404’s.

I reduced the problem to this simple task to reproduce it:

gulp.task('inject', function () {
  var jsFiles = gulp.src(['./app/scripts/**/*.js']);

  return gulp.src('./app/index.html')
    .pipe($.inject(jsFiles, {relative: true}))
    .pipe(gulp.dest('./app'));
});

Am I doing something wrong or is this the intended behavior?

[kurdin]

in case if anybody need workaround, here is how I remove scripts with gulp-replace

var replace = require('gulp-replace');
...
gulp.task('remove-dev-js', function() {
  return gulp.src('./html/**/*.html')
    .pipe(replace(/<!-- (.*?):js -->([\S\s]*?)<!-- endinject -->/gmi, '<!-- $1:js -->\n<!-- endinject -->'))
    .pipe(gulp.dest('./html'));
});

[derekgreer]

The desire to remove sections probably arises for many where style sheets or scripts need to be injected in a particular order for local/debug builds and as combined/minifed for release builds. For example:

<!-- bower:js -->
<!-- endinject -->

<!-- otherThirdParty:js -->
<!-- endinject -->

<!-- myStuff:js -->
<script src="~/dist/lib/how-it-be-in-prod-9cebad55e4.js"></script>
<!-- endinject -->

For such cases, another workaround to consider is to use a single injection tag for all script types and combine multiple streams into one stream which is passed to inject. This will also allow you to conditionally combine streams based upon environment variables, etc. The best library I’ve found for doing this is streamqueue.

Here’s an example:

gulp.task("inject-dependencies", function() {
  var layoutStream = gulp.src("./index.html", { base: "./" });

  var firstStream = gulp.src("something/**/*", { read: false });
  var secondStream = gulp.src("something/**/*", { read: false });
  var thirdStream = gulp.src("something/**/*", { read: false });

  var stream = isRelease ? firstStream : queue({ objectMode: true }, secondStream, thirdStream);

  return layoutStream
    .pipe($.inject(stream, {
      name: "scripts",
      relative: false,
      addRootSlash: false
    }))
    .pipe(gulp.dest("./"));
});