Making sense of build error while running gulp - gulp

Question

Everytime I run my gulp task, it generates a error on first run. The error is below. When I run it again, it builds without any error.
I am confused, why does it throw an error the first time but not after that.
[08:38:08] Using gulpfile ~/Documents/Code/proj2/Gulpfile.js
[08:38:08] Starting 'stylus'...
[08:38:08] Finished 'stylus' after 7.99 ms
[08:38:08] Starting 'copyClientHTML'...
[08:38:08] Finished 'copyClientHTML' after 2.27 ms
[08:38:08] Starting 'clientLint'...
[08:38:08] Starting 'demon'...
[08:38:08] Finished 'demon' after 1.88 ms
[gulp] [nodemon] v1.2.1
[gulp] [nodemon] to restart at any time, enter `rs`
[gulp] [nodemon] watching: *.*
[gulp] [nodemon] starting `node server/js/server.js`
[08:38:08] Starting 'watch'...
[08:38:09] Finished 'watch' after 31 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, stat '/Users/jhans/Documents/Code/proj2/client/build/index.html'
Including Gulpfile.
/*jshint globalstrict: true*/
'use strict';
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
stylus = require('gulp-stylus'),
del = require('del'),
nodemon = require('gulp-nodemon'),
concat = require('gulp-concat');
var paths = {
client: {
scripts: 'client/js/**/*.js',
html: 'client/views/*.html',
index: 'client/*.html',
css: 'client/css/*.styl',
conf: 'client/conf.js'
},
server: {
scripts: 'server/js/**/*.js'
}
};
// Rerun the task when a file changes
gulp.task('watch', function () {
gulp.watch(paths.client.css, ['stylus']);
gulp.watch(paths.client.scripts, ['browserify']);
gulp.watch([paths.client.html, paths.client.index], ['copyClientHTML']);
gulp.watch(paths.server.scripts, ['serverLint']);
});
gulp.task('demon', function () {
nodemon({
script: 'server/js/server.js',
ext: 'js',
env: {
'NODE_ENV': 'development'
}
})
.on('start', ['watch'])
.on('change', ['watch'])
.on('restart', function () {
console.log('restarted!');
});
});
// Default Task
gulp.task('default', ['build', 'demon']);
gulp.task('build', ['stylus', 'copyClientHTML', 'browserify']);
/********** Building CSS *********/
gulp.task('stylus', function () {
del(['client/build/css/*']);
gulp.src(paths.client.css)
.pipe(stylus())
.pipe(concat('all.css'))
.pipe(gulp.dest('client/build/css/'));
});
gulp.task('clientLint', function () {
return gulp.src([paths.client.scripts])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('serverLint', function () {
return gulp.src([paths.server.scripts])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('browserify',['clientLint'], function () {
del(['client/build/js/*']);
gulp.src('client/js/app.js')
.pipe(browserify({
insertGlobals: true,
debug: true
}))
.pipe(gulp.dest('client/build/js'));
});
gulp.task('copyClientHTML', function () {
del(['client/build/views/*.*']);
del(['client/build/index.html']);
gulp.src(paths.client.html)
.pipe(gulp.dest('client/build/views'));
gulp.src(paths.client.index)
.pipe(gulp.dest('client/build'));
});

Answer 1

Your problem might come from your copyClientHTML task (and potentially some others).
Indeed, you have to know that the del module does not run synchronously. So it might delete your files after there were created, and can explain the issue you're experiencing.
I may advice you to create a task dedicated to the cleaning of your files that you can put as dependency of some of your tasks; or better a little function where you can pass a parameter to clean specified folders.
This will ensure you that the cleaning is finished before creating the new files.