Gulp-inject says "Nothing to inject into index.html"

Question

I'm trying to inject some files in my index, all of them concatenated and minified into a .tmp folder, as follows:

gulp.task('prep-js',['clean'], function(){
  var jspath = './src/page/**/*.js';
  var treatJs = gulp.src(jspath)
         .pipe(plugins.concat('scripts.js'))
         .pipe(plugins.uglify())
         .pipe(gulp.dest('.tmp/page/js'))
});

But when I run the injection task, it says "Nothing to inject into index.html". Here's the code:

gulp.task('inject-deps', ['prep-css', 'prep-js'], function(){

  //select main bower files
  var bowerDep = gulp.src(plugins.mainBowerFiles(), {read: false});

  //inject files
  return  gulp.src('./src/page/index.html')
          .pipe(plugins.inject(bowerDep, {relative: true, name:'bower'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/js/*.js'), {name:'frontjs'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/css/*.css'), {name:'frontcss'}))
          .pipe(gulp.dest('.tmp/page'));
});

Interesting thing, the first pipe injecting the main bower files works perfectly, but it doesn't happen to the following two.

Also, just for information, 'plugins' is a variable which is requiring my plugins.

Any idea about this issue?

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

You need to return the stream in your prep-js task:

gulp.task('prep-js',['clean'], function(){
  var jspath = './src/page/**/*.js';
  return gulp.src(jspath)
         .pipe(plugins.concat('scripts.js'))
         .pipe(plugins.uglify())
         .pipe(gulp.dest('.tmp/page/js'))
});

Otherwise inject-deps will not wait for prep-js to finish before it runs, meaning the concatenated and uglified JS files will not be in .tmp/page/js yet.

Relevant portion of the Gulp documentation:

Note: By default, tasks run with maximum concurrency -- e.g. it launches all the tasks at once and waits for nothing. If you want to create a series where tasks run in a particular order, you need to do two things:

give it a hint to tell it when the task is done,

and give it a hint that a task depends on completion of another.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 12 '16 at 14:55

Sven Schoenung

30,224
8
65
70

Thanks @svenschoenung ! But isn't it being done yet when I specify the dependent tasks, like ['prep-css', 'prep-js']? – Vinicius de Moraes Feb 12 '16 at 16:07
Nope, to prevent the tasks from running concurrently you need **both** of the bullet points that I quoted from the docs. You have the second one (hinting the dependency with `['prep-css', 'prep-js']`), but you're missing the first one (the one I bolded). – Sven Schoenung Feb 12 '16 at 16:12
That's one option, yes. If you look at the docs I linked, you can use callbacks, promises or just return the stream (as I did in my answer). Have you tried my solution yet? Notice that I use a `return` statement where you use `var treatJs =`. – Sven Schoenung Feb 12 '16 at 16:25
Yes, I realized that! Thank you for the hint! – Vinicius de Moraes Feb 12 '16 at 16:31

Gulp-inject says "Nothing to inject into index.html"

1 Answers1

Linked