Why is Gulp failing randomly with ENOENT error (or) failing to generate output (or accidentally deleted)?

Question

Software Environment

I am using NodeJS v4.2.1 on Windows.
I have included my gulpfile.js, bower.json, and package.json files at the bottom.

---

Additional Information

1. I don't have any IDE running at the moment. So it is definitely not a problem with files being locked by an external program.
2. I am running everything on the command prompt.

---

Question

1. Is something wrong with my gulpfile.js?
2. Is this a bug with NodeJS v4.2.1?
3. Is this a bug with Gulp?

---

Problem

I am experiencing these two problems when I run gulp at command prompt.

Problem #1

My build folder would not be created every other time when I run gulp.
When I run it first time, it creates the build folder with copy-bower Gulp task output artifacts.

When I run it another time after it, build folder doesn't get created.
The gulp console output clearly shows my copy-bower task ran after the clean task, but I don't see the build folder created.

[21:21:32] Using gulpfile
[21:21:32] Starting 'clean'...
[21:21:32] Finished 'clean' after 3.66
[21:21:32] Starting 'copy-bower'...
[21:21:32] Finished 'copy-bower' after
[21:21:32] Starting 'default'...
[21:21:32] Finished 'default' after 6.

Directory: C:\Users\stun\Desktop\test-app

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       10/22/2015   9:00 PM                bower_components
d-----       10/22/2015   8:59 PM                node_modules
-a----       10/22/2015   9:30 PM            347 bower.json
-a----       10/22/2015   9:31 PM            421 gulpfile.js
-a----       10/22/2015   9:30 PM            301 package.json

---

Problem #2

From time to time, I get either one of these errors.

events.js:141
    throw er; // Unhandled 'error' event
^

Error: ENOENT: no such file or directory, chmod 'C:\Users\stun\Desktop\test-app\build\bower_components\jquery\dist\jquery.min.map'
at Error (native)

Another Error

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, stat 'C:\Users\stun\Desktop\test-app\build\bower_components\bootstrap\dist\fonts'
    at Error (native)

---

gulpfile.js

var gulp = require('gulp'),
    del = require('del');

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

gulp.task('copy-bower', ['clean'], function () {
    var src = [
        './bower_components/bootstrap/dist/**',
        './bower_components/jquery/dist/*'
    ];
    gulp.src(src, { base: '.' })
       .pipe(gulp.dest('./build/'));
});

gulp.task('default', ['copy-bower'], function () { });

bower.json

{
  "name": "test-app",
  "description": "testing gulp and bower",
  "main": "",
  "moduleType": [],
  "authors": [""],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.5"
  }
}

package.json

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "testing gulp and bower",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.0.2",
    "gulp": "^3.9.0"
  }
}

Answer 1

Your tasks do not return anything or call any callbacks, so Gulp thinks your tasks are done immediately. In particular, it won't wait for your clean task to have finished its work before starting to copy the bower files. The two may clash and result in filesystem errors.

Change your code to this:

var gulp = require('gulp'),
    del = require('del');

gulp.task('clean', function () {
    // Return the promise that del produces.
    return del(['build']);
});

gulp.task('copy-bower', ['clean'], function () {
    var src = [
        './bower_components/bootstrap/dist/**',
        './bower_components/jquery/dist/*'
    ];
    // Return your stream.
    return gulp.src(src, { base: '.' })
       .pipe(gulp.dest('./build/'));
});

gulp.task('default', ['copy-bower'], function () { });

Answer 2

If the output shows that one task is starting before the previous is finished (especially "clean"), like this (see 'build' starting before 'clean' has ended):

[08:32:07] Using gulpfile ~/project/gulpfile.js
[08:32:07] Starting 'clean'...
[08:32:07] Starting 'build'...
[08:32:07] Finished 'clean' after 14 ms
[08:32:07] Finished 'build' after 15.53 ms

Use these techniques to fix it:

Technique 1 - return a promise

As @Louis wrote, turn this:

del = require('del');

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

into this:

del = require('del');

gulp.task('clean', function () {
    return del(['build']);  // see "return"
});

Technique 2 - task's dependency

turn this:

gulp.task('build', function () {
  // some code...
});

to this:

gulp.task('build', ['clean'], function () {  // see 'clean' as dependency
  // some code...
});

Technique 3 - tasks ordering

turn this:

gulp.task('default', ['build', 'serve', 'watch']);

into this:

gulp.task('default', ['build'], function () {
    gulp.start(['serve', 'watch']); // starts only after 'build'
});

Answer 3

Sadly I find that this issue still occurs. The esiest solution (for me) is to use run-sequence:

var runSequence = require('run-sequence');

gulp.task('some-task', function() {
    runSequence(
        ['task-1', 'task-2', 'task-3'], // These 3 can be done in parallel
        'task-4', // ...then just do this
        ['task-5', 'task-5'], // ...then do these things in parallel
        'task-6', // ...then do this
        // ....
    );
});

found: https://davidwalsh.name/gulp-run-sequence