Gulp inject ignores css if the dist folder was first cleaned

Question

I have a simple gulp script. The flow is:

1. delete dist folder
2. move .html and .css files to the new dist folder
3. compile typescript and move generated .js to dist folder
4. mimify the .js
5. inject .js and .css into .html

The problem is that if I first delete the dist folder, the injection works only for .js files. However if I skip the cleaning of dist folder it creates a correct .html (as in both .js and .css are present in index.html). Has any one encountered this problem? If so, how have you fixed it? I am guessing it has something to do with pipelining.

Gulp version: "^3.9.1"

var gulp = require('gulp');
var ts = require('gulp-typescript');
var minify = require('gulp-minify');
var inject = require('gulp-inject');
var del = require('del');

gulp.task('default', ['clean'], function () {
    gulp.start('scripts')
});

gulp.task('clean', function (cb) {
    del(['dist'], cb)
});

gulp.task('move', function () {
    console.log('-- gulp is running task "move"');
    gulp.src(['app/**/*.html', 'app/**/*.css'])
        .pipe(gulp.dest('dist'));
});

gulp.task('compile', ['move'], function () {
    console.log('-- gulp is running task "compile"');
    return gulp.src('app/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'app.js'
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('compress', ['compile'], function () {
    console.log('-- gulp is running task "compress"');
    gulp.src('dist/**/*.js')
        .pipe(minify({
            ext: {
                src: '-debug.js',
                min: '.js'
            },
            noSource: true
        }))
        .pipe(gulp.dest('dist'))
});


gulp.task('scripts', ['compress'], function () {
    console.log('-- gulp is running task "scripts"');
    var target = gulp.src('dist/index.html');
    var sources = gulp.src(['dist/**/*.js', 'dist/**/*.css'], {read: false});
    return target.pipe(inject(sources, {relative: true}))
        .pipe(gulp.dest('dist'));
});

Answer 1

You're running into race conditions because you're not properly signalling async completion in several places:

del doesn't take a callback cb, it returns a Promise. You need to return that Promise from your task:

gulp.task('clean', function () {
  return del(['dist']);
});

Streams need to be returned from your tasks as well. You're not doing that in your move and compress tasks which (among other things) means that gulp-inject might run before all .css files have been copied over to dist/.

gulp.task('move', function () {
  console.log('-- gulp is running task "move"');
  return gulp.src(['app/**/*.html', 'app/**/*.css'])
    .pipe(gulp.dest('dist'));
})

gulp.task('compress', ['compile'], function () {
  console.log('-- gulp is running task "compress"');
  return gulp.src('dist/**/*.js')
    .pipe(minify({
        ext: {
            src: '-debug.js',
            min: '.js'
        },
        noSource: true
    }))
    .pipe(gulp.dest('dist'));
});