Why does Gulp not complete my 'clean' task before running the tasks that depend on it?

Question

I have a gulpfile that should clean out my dist directory before minifying code. Sometimes, the clean task is still running while code is being minified resulting in some missing files.

What's causing it to do that? My understanding is that the dependencies for a task will be completed before the task runs, and a dependency will only run once even if it is a dependency for multiple tasks.

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
var del = require('del');

gulp.task('default', ['css', 'js', 'fonts']);

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

gulp.task('css', ['clean'], function() {
  return gulp.src('style.css')
            .pipe(plugins.autoprefixer({
              browsers: ['last 2 versions']
            }))
            .pipe(gulp.dest('dist'))
            .pipe(plugins.minifyCss({
              noRebase: true,
              keepSpecialComments: 0
            }))
            .pipe(plugins.rename({extname: '.min.css'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('js', ['clean'], function() {
  return gulp.src('scripts.js')
            .pipe(gulp.dest('dist'))
            .pipe(plugins.uglify({preserveComments: 'some'}))
            .pipe(plugins.rename({extname: '.min.js'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('fonts', ['clean'], function() {
  return gulp.src('fonts/*')
            .pipe(gulp.dest('dist/fonts'));
});

UPDATE: Gulp output suggests that the clean task is done before the others start, but sometimes not all the output files are in the dist directory. Sometimes they are.

[09:47:15] Using gulpfile /Users/raddevon/Documents/projects/AlphaBlog/theme/gulpfile.js
[09:47:15] Starting 'clean'...
[09:47:15] Finished 'clean' after 8.06 ms
[09:47:15] Starting 'css'...
[09:47:15] Starting 'js'...
[09:47:16] Starting 'fonts'...
[09:47:16] Finished 'js' after 399 ms
[09:47:16] Finished 'css' after 899 ms
[09:47:16] Finished 'fonts' after 267 ms
[09:47:16] Starting 'default'...
[09:47:16] Finished 'default' after 7.78 μs

Answer 1

Use del.sync() and the other tasks will start only after the clean task completion.

gulp.task('clean', function () {
    del.sync(['./build/**']);
});

Also check this thread: How to clean a project correctly with gulp?

Answer 2

Have a look at the running tasks in series, from the Gulp documentation.

If your tied to having one clean task then maybe try returning the stream per the second example from above, and see if that helps.

I personally like to make clean tasks more specific, (more like the first example), so you could always try something like:

...

// minify css
gulp.task('clean:css', function(cb) {
  del(['dist/*.css'], cb);
});

gulp.task('comp:css', ['clean:css'], function(cb) {
  return gulp.src('style.css')
    .pipe(minifyCss())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(build.css), cb);
});

gulp.task('css', ['comp:css']);

// concat js
gulp.task('clean:js', function(cb) {
  del(['dist/*.js'], cb);
});

// and so on