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`         


        

Answer 1

Use del.sync. It completes the del and then returns from the task

gulp.task('clean', function () {
    return $.del.sync([path.join(conf.paths.dist, '/**/*')]);
});

and be sure clean is the first task in a list of tasks. For example,

gulp.task('build', ['clean', 'inject', 'partials'], function ()  {
    //....
}

@Ben i liked the way you have separated clean:css clean:js tasks. That's a great tip

Answer 2

for the default task I would suggest using 'run-sequence' to run a sequence of gulp tasks in a specified order, check it out here: https://www.npmjs.com/package/run-sequence
then I would use the 'watch' task as I normally do.

for the images task I would add caching since it's an heavy task, check it out here: https://www.npmjs.com/package/gulp-cache

combining it all together will look something like the following:

var gulp = require('gulp');
var runSequence = require('run-sequence');
var del = require('del');
var cache = require('gulp-cache');

// Clean build folder function:
function cleanBuildFn() {
    return del.sync(paths.build);
}

// Build function:
function buildFn(cb) {
    runSequence(
        'clean:build', // run synchronously first
        ['scripts, 'images'], // then run rest asynchronously
        'watch',
        cb
    );
}

// Scripts function:
function scriptsFn() {
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
}

// Images function with caching added:
function imagesFn() {
    gulp.src(paths.source + '/images/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin({optimizationLevel: 5})))
    .pipe(gulp.dest(paths.build + '/images'));
}

// Clean tasks:
gulp.task('clean:build', cleanBuildFn);

// Scripts task:
gulp.task('scripts', scriptsFn);

// Images task:
gulp.task('images', imagesFn);

// Watch for changes on files:
gulp.task('watch', function() {
    gulp.watch(paths.source + '/images/**/*.+(png|jpg|gif|svg)', ['images']);
    gulp.watch(paths.source + '/scripts/**/*.js', ['scripts']);
});

// Default task:
gulp.task('default', buildFn);

Answer 3

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']);

Answer 4

Just use the module directly as gulp.src is costly. Make sure you use the sync() method otherwise you may have conflicts.

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

The other way to do it if you want to use the gulp pipes: https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md

var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('clean:tmp', function () {
  return gulp.src('tmp/*')
    .pipe(vinylPaths(del))
    .pipe(stripDebug())
    .pipe(gulp.dest('dist'));
});

Answer 5

I found this problem. I just clean my target files in my task. like this:

gulp.task('img', function() {
    //clean target before all task
    del(['build/img/*']);
    gulp.src(paths.images)
        .pipe(gulp.dest('build/img'));
});

just one line to solve it. Hope this could help you.

Answer 6

I had an issue with the callback method. The callback was running before the del operation had completed, causing errors. The fix was returning the del result to the caller as below:

// Clean
gulp.task('clean', function() {
    return del(['public/css', 'public/js', 'public/templates'])
});

// Build task
gulp.task('build', ['clean'], function() {
    console.log('building.....');
    gulp.start('styles', 'scripts', 'templates');
});