Gulp wire dependencies in two tasks

Question

I have this project structure.

I want to make it so that when I run the gulp task of inject-bower, it will take the bower folder and inject all neccessary files. Then when I do inject-app, it will take all scripts and inject it as such.

I put both tasks in one concurrent task stream as such:

gulp.task('inject', ['inject-bower', 'inject-app'], function() {
  console.log('Injection done.');
})

But, it seems to only inject the bower folder. However, when I run gulp inject-bower and gulp inject-app one after the other... it works.

Here is my gulpfile:

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var wiredep = require('wiredep').stream;
var inject = require('gulp-inject');

var runSequence = require('run-sequence').use(gulp);
var del = require('del');

gulp.task('inject', ['inject-bower', 'inject-app'], function() {
  console.log('Injection done.');
})

gulp.task('inject-bower', ['clean'], function() {
    gulp.src('./index.html')
        .pipe(wiredep({}))
        .pipe(gulp.dest('./src'));
});

gulp.task('clean', function() {
  return del('src/index.html');
});

gulp.task('inject-app', function () {
  gulp.src('./src/index.html')
    .pipe(inject(
      gulp.src(['./src/js/client/*.js'], {read: true})
    ))
    .pipe(gulp.dest('./src'));
});

// For production/dev
gulp.task('styles', function(){
  gulp.src(['src/stylesheets/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('src/stylesheets/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('src/stylesheets/'))
});

// For production.
gulp.task('build-scripts', function(){
  return gulp.src('src/js/client/**/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(concat('bundle.js'))
    .pipe(gulp.dest('src/js/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('src/js/'))
});

gulp.task('default', ['inject'], function(){
  //gulp.watch("src/stylesheets/*.scss", ['styles']);
  //gulp.watch("src/js/client/**/**/*.js", ['scripts']);
  gulp.watch("*.html", ['inject']);
});

Here is the console output:

/usr/local/bin/node /usr/local/lib/node_modules/gulp/bin/gulp.js --color --gulpfile /Users/dan/Projects/AngularJSApp/gulpfile.js inject [12:21:53] Using gulpfile ~/Projects/AngularJSApp/gulpfile.js [12:21:53] Starting 'clean'... [12:21:53] Starting 'inject-app'... [12:21:53] Finished 'inject-app' after 18 ms [12:21:53] Finished 'clean' after 40 ms [12:21:53] Starting 'inject-bower'... [12:21:53] Finished 'inject-bower' after 1.89 ms [12:21:53] Starting 'inject'... Injection done. [12:21:53] Finished 'inject' after 19 μs [12:21:53] gulp-inject 1 files into index.html.

Process finished with exit code 0

and here is what I am left with in src/index.html when I am done with that:

<!DOCTYPE html ng-app="chat">
<html>
<head>
    <title>Hello Chat</title>

    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <!-- endbower -->

    <!-- inject:css -->
    <!-- endinject -->
</head>
<body>
    <h1>Ready to play?</h1>

    <section>
        Hey man.

        <div ng-controller="ChatCtrl"></div>
    </section>

    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/moment/moment.js"></script>
    <!-- endbower -->

    <!-- inject:js -->
    <!-- endinject -->
</body>
</html>

What am I doing wrong?

pkmiec pkmiec · Accepted Answer · 2016-04-19T18:38:57

I think you need to specify dependency on 'clean' task in 'inject-app' task, like below.

gulp.task('inject-app',  ['clean'], function () { ...

Without that you run into a problem with 'clean' running between 'inject-app' and 'inject-bower'. It's in your log output:

[12:21:53] Starting 'clean'... 
[12:21:53] Starting 'inject-app'... 
[12:21:53] Finished 'inject-app' after 18 ms 
!!! [12:21:53] Finished 'clean' after 40 ms !!!
[12:21:53] Starting 'inject-bower'...

I presume it's the source of problems in your app.

As a sidenote, Gulp 4 is going to introduce 'gulp.series' and 'gulp.parallel' dependencies which allow to explicitly say which behaviour of dependency running you want to see. It's described here.

Gulp wire dependencies in two tasks

2 Answers