How to clean a project correctly with gulp?

Question

On the gulp page there is the following example:

gulp.task('clean', function(cb) {   // You can use multiple globbing patterns as you would with `gulp.src`   del(['build'], cb); });  gulp.task('scripts', ['clean'], function() {   // Minify and copy all JavaScript (except vendor scripts)   return gulp.src(paths.scripts)     .pipe(coffee())     .pipe(uglify())     .pipe(concat('all.min.js'))     .pipe(gulp.dest('build/js')); });  // Copy all static images gulp.task('images', ['clean'], function() {  return gulp.src(paths.images)     // Pass in options to the task     .pipe(imagemin({optimizationLevel: 5}))     .pipe(gulp.dest('build/img')); });  // the task when a file changes gulp.task('watch', function() {   gulp.watch(paths.scripts, ['scripts']);   gulp.watch(paths.images, ['images']); });  // The default task (called when you run `gulp` from cli) gulp.task('default', ['watch', 'scripts', 'images']); 

This works quite well. But there is one big problem with the watch task. If I change an image, the watch task detect it and runs the images task. This also has a dependency (gulp.task('images', **['clean']**, function() {) on the clean task, so this runs also. But than my script files are missing because the scripts task did not start again and the clean task deleted all files.

How can I just run the clean task on the first startup and keep the dependencies?

Answer 1

You can make separate tasks to be triggered by watch:

gulp.task('clean', function(cb) {   // You can use multiple globbing patterns as you would with `gulp.src`   del(['build'], cb); });  var scripts = function() {   // Minify and copy all JavaScript (except vendor scripts)   return gulp.src(paths.scripts)     .pipe(coffee())     .pipe(uglify())     .pipe(concat('all.min.js'))     .pipe(gulp.dest('build/js')); }; gulp.task('scripts', ['clean'], scripts); gulp.task('scripts-watch', scripts);  // Copy all static images var images = function() {  return gulp.src(paths.images)     // Pass in options to the task     .pipe(imagemin({optimizationLevel: 5}))     .pipe(gulp.dest('build/img')); }; gulp.task('images', ['clean'], images); gulp.task('images-watch', images);  // the task when a file changes gulp.task('watch', function() {   gulp.watch(paths.scripts, ['scripts-watch']);   gulp.watch(paths.images, ['images-watch']); });  // The default task (called when you run `gulp` from cli) gulp.task('default', ['watch', 'scripts', 'images']);