Why doesn't Gulp do my “clean” task before starting tasks that depend on it?

Question

I have a gulpfile that needs to clear my dist directory before the code changes. Sometimes a clean task still works while the code is minimized, which leads to some missing files.

What makes it do it? My understanding is that dependencies for a task will be completed before , if the task is running, and the dependency will be executed only once, even if it is a dependency for several 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 concludes that the clean task runs before the rest, but sometimes not all 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 rest of the tasks will only begin after the clean task completes.

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

Also check out this topic: How to properly clean up a project using gulp?

Answer 2

See running tasks in sequence from Gulp .

If yours is tied to one clean task, then maybe try returning the thread to 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 can 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