如何用gulp正确清理项目

可以设置单独的任务由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']);

使用del.sync。它完成del，然后从任务

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

并确保clean是任务列表中的第一个任务。例如,

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

@Ben我喜欢你把clean:css clean:js任务分开的方式。这是一个很好的提示

直接使用该模块作为gulp。SRC是昂贵的。确保使用sync()方法，否则可能会发生冲突。

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

另一种方法，如果你想使用吞咽管道: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'));
});

我有一个回调方法的问题。回调在删除操作完成之前正在运行，从而导致错误。修复方法是将del结果返回给调用者，如下所示:

// 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');
});

我发现这个问题。我只是清理我的任务中的目标文件。这样的:

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

只用一行来解它。

对于默认任务，我建议使用'run-sequence'来按照指定的顺序运行一系列gulp任务。点击这里查看:https://www.npmjs.com/package/run-sequence
那么我会像往常一样使用"watch"任务。

对于图像任务，我将添加缓存，因为它是一个繁重的任务，查看这里:https://www.npmjs.com/package/gulp-cache

将它们组合在一起将看起来像下面这样:

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