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?

Answer 1

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.