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

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
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.
I am running everything on the command prompt.
Question
Is something wrong with my gulpfile.js?
Is this a bug with NodeJS v4.2.1?
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

Answer 4

Just in case anyone encounters this issue after following the solutions in this thread... I was executing my clean and copy task within a gulp.parallel instead of a gulp.series which was making my build task fail randomly. I spent 1 hour trying to figure out what the problem was but never noticing that small detail. Hopefully this is useful for someone