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 pleted 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

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 pleted 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

• javascript
• gulp

• Why do you .pipe(gulp.dest('dist')) multiple times in each task by the way? – Oleg Commented Jan 23, 2015 at 15:46
• @Oleg I want both unminified and minified files in my dist directory. – raddevon Commented Jan 23, 2015 at 15:49
• What leads you to believe that the clean task is not done before other things start running? Can you post some gulp output? – Ben Commented Jan 23, 2015 at 16:04
• @ben Added to the post. Not all the files are in the folder at the end. Sometimes they are, sometimes they aren't. It seems like files start getting moved or piled into dist before clean is done. Otherwise, I can't understand why they wouldn't be there. It's very inconsistent. Affects different files each time. – raddevon Commented Jan 23, 2015 at 16:44
• 1 maybe you should change to: del(['dist/**/*'], cb); – Slawa Eremin Commented Jan 23, 2015 at 16:47

2 Answers 2

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

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

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

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('p: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', ['p:css']);

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

// and so on