gulp tasks are failing with EEXIST errors

Question

This morning, my gulp build script started failing; other than doing my normal work within the project directory, I made no other changes to my system.

I have a /src directory with various HTML fragments, images, javascript, LESS, and I'm using gulp to compile/concatenate/copy them and place them in the /web directory. The 'default' task runs a 'build' task, which calls all the other tasks, and then gulp.watch is set up to watch the directories for changes, and run the appropriate task is a change is found.

At the start of each task, I use del() to clean the destination folder. However, when it comes time to place the contents in the destination folder, the task fails with an 'EEXIST' error, or the task completes fine, and some of the files are randomly missing from the output directory.

Here is my command prompt which shows the tasks failing at random:

> user$ gulp
[11:58:02] Using gulpfile PROJECTPATH/gulpfile.js
[11:58:02] Starting 'styles'...
[11:58:02] Starting 'scripts'...
[11:58:02] Starting 'images'...
[11:58:02] Starting 'fonts'...
[11:58:02] Starting 'html'...
[11:58:03] Finished 'styles' after 726 ms
[11:58:03] gulp-imagemin: Minified 1 image (saved 7.38 kB - 10.4%)
[11:58:03] Finished 'fonts' after 714 ms
[11:58:03] Finished 'images' after 722 ms
[11:58:03] Finished 'scripts' after 741 ms
[11:58:03] Finished 'html' after 737 ms
[11:58:03] Starting 'build'...
[11:58:03] Finished 'build' after 9.61 μs
[11:58:03] Starting 'default'...
[11:58:03] Finished 'default' after 125 ms
> user$ gulp
[11:58:22] Using gulpfile PROJECTPATH/gulpfile.js
[11:58:22] Starting 'styles'...
[11:58:22] Starting 'scripts'...
[11:58:22] Starting 'images'...
[11:58:22] Starting 'fonts'...
[11:58:22] Starting 'html'...
[11:58:22] 'scripts' errored after 86 ms
[11:58:22] Error: EEXIST, mkdir 'PROJECTPATH/web/project_files/js'
[11:58:22] 'fonts' errored after 74 ms
[11:58:22] Error: ENOENT, open 'PROJECTPATH/web/project_files/fonts/glyphicons-halflings-regular.eot'
[11:58:23] 'html' errored after 144 ms
[11:58:23] Error: EEXIST, mkdir 'PROJECTPATH/web/project_files/templates/instruction'
[11:58:23] Finished 'styles' after 728 ms
[11:58:23] gulp-imagemin: Minified 1 image (saved 7.38 kB - 10.4%)
[11:58:23] Finished 'images' after 736 ms
> user$ gulp
[11:58:28] Using gulpfile PROJECTPATH/gulpfile.js
[11:58:28] Starting 'styles'...
[11:58:28] Starting 'scripts'...
[11:58:28] Starting 'images'...
[11:58:28] Starting 'fonts'...
[11:58:28] Starting 'html'...
[11:58:28] Finished 'styles' after 729 ms
[11:58:28] Finished 'fonts' after 707 ms
[11:58:28] Finished 'scripts' after 737 ms
[11:58:28] gulp-imagemin: Minified 1 image (saved 7.38 kB - 10.4%)
[11:58:28] Finished 'images' after 733 ms
[11:58:28] Finished 'html' after 740 ms
[11:58:28] Starting 'build'...
[11:58:28] Finished 'build' after 9.73 μs
[11:58:28] Starting 'default'...
[11:58:28] Finished 'default' after 120 ms
> user$ gulp
[11:58:34] Using gulpfile PROJECTPATH/gulpfile.js
[11:58:34] Starting 'styles'...
[11:58:34] Starting 'scripts'...
[11:58:34] Starting 'images'...
[11:58:34] Starting 'fonts'...
[11:58:34] Starting 'html'...
[11:58:34] 'scripts' errored after 95 ms
[11:58:34] Error: EEXIST, mkdir 'PROJECTPATH/web/project_files/js'
[11:58:34] 'fonts' errored after 84 ms
[11:58:34] Error: ENOENT, open 'PROJECTPATH/web/project_files/fonts/glyphicons-halflings-regular.eot'
[11:58:34] 'html' errored after 143 ms
[11:58:34] Error: EEXIST, mkdir 'PROJECTPATH/web/project_files/templates/instruction'
[11:58:35] Finished 'styles' after 737 ms
[11:58:35] gulp-imagemin: Minified 1 image (saved 7.38 kB - 10.4%)
[11:58:35] Finished 'images' after 742 ms

Here is the gulp file I'm using:

var gulp = require('gulp'),
  less = require('gulp-less'),
  autoprefixer = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  rename = require('gulp-rename'),
  concat = require('gulp-concat'),
  fileinclude = require('gulp-file-include'),
  cache = require('gulp-cache'),
  gutil = require('gulp-util'),
  rename = require('gulp-rename'),
  merge = require('merge-stream'),
  del = require('del'),
  libraries = [
    'src/js/jquery-*.js',
    'src/js/bootstrap/transition.js',
    'src/js/bootstrap/collapse.js',
    'src/js/bootstrap/modal.js',
    'src/js/bootstrap/affix.js',
    'src/js/bootstrap-datepicker.js',
    'src/js/bootbox.js',
    'src/js/chosen.jquery.js',
    'src/js/underscore.js',
    'src/js/sha1.js',
    'src/js/DeviceIdConverter.js',
    'src/js/custom.js'
  ],
  ieLibraries = [
    'src/js/html5shiv.js',
    'src/js/respond.js'
  ],
  appConfig = [
    'src/js/country.json',
    'src/js/locations.json',
    'src/js/make_model.json',
    'src/js/project.js'
  ];

gulp.task('styles', function() {
  del(['web/project_files/css']);
  return gulp.src('src/less/project.less')
    .pipe(less())
    .pipe(gulp.dest('web/project_files/css'))
});

gulp.task('scripts', function() {
  del(['web/project_files/js']);

  var libraryStream = gulp.src(libraries)
    .pipe(concat('libraries.js')),

  ieLibraryStream = gulp.src(ieLibraries)
    .pipe(concat('ie8.js')),

  appConfigStream = gulp.src(appConfig)
    .pipe(rename(function(path) {
      path.extname = '.js';
    }));

  return merge(libraryStream, ieLibraryStream, appConfigStream)
    .pipe(gulp.dest('web/project_files/js'));
});

gulp.task('images', function() {
  del(['web/project_files/img']);
  return gulp.src('src/img/**/*.+(jpg|png)')
    .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('web/project_files/img'))
});

gulp.task('fonts', function() {
  del(['web/project_files/fonts']);
  return gulp.src('src/fonts/**/*.+(eot|svg|ttf|woff|otf)')
    .pipe(rename(function(path) {
      path.dirname = '';
    }))
    .pipe(gulp.dest('web/project_files/fonts'));
});

gulp.task('html', function() {
  del(['web/project.htm']);
  del(['web/project_files/templates']);

  var htmlStream = gulp.src('src/html/index.html')
    .pipe(fileinclude())
    .pipe(rename('project.htm'));

  var templateStream = gulp.src('src/html/templates/**/*.html')
    .pipe(rename(function(path) {
      path.dirname = "/project_files/templates/"+path.dirname;
      path.extname = ".tpl";
    }));

  return(merge(htmlStream, templateStream))
    .pipe(gulp.dest('web'));
});

gulp.task('build', ['styles', 'scripts', 'images', 'fonts', 'html'], function() {

});


gulp.task('default', ['build'], function() {
  gulp.watch('src/html/**/*.html', ['html']);
  gulp.watch('src/less/**/*.less', ['styles']);
  gulp.watch('src/js/**/*.js', ['scripts']);
  gulp.watch('src/img/**/*.+(jpg|png)', ['images']);
  gulp.watch('src/fonts/**/*.+(eot|svg|ttf|woff|otf)', ['fonts']);
});

The error message says the destination location exists, but shouldn't del() be removing the destination directory at the start of every child task?

UPDATE:

Here is the way I structure my tasks now, which seems to be working fast and correctly:

gulp.task('scripts', function() {
  del(['web/js'], function(err) {
    if (err) return;
    return gulp.src('src/js/**/*.js')
      .pipe(concat('mything.js'))
      .pipe(gulp.dest('web/js'));
  });
});

Answer 1

shouldn't del() be removing the destination directory at the start of every child task?

Yes, but you end up creating new things before del has finished (it is async).

I'd create a separate task and use it as a dependency only when doing a full build.

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

.. or use del.sync

https://github.com/sindresorhus/del#delsyncpatterns-options