如何使用gulp正确清理项目？

Question

在gulp页面上有如下示例：

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

这个工作相当不错。但是，watch任务有一个很大的问题。如果我更改了一张图片，watch任务会检测到并运行images任务。这也依赖于clean任务（gulp.task('images', **['clean']**, function() {），所以这也运行了。但是，然后我的脚本文件就不存在了，因为scripts任务没有重新启动，而clean任务删除了所有文件。

我如何在第一次启动时只运行clean任务并保留依赖关系？

- Jan Hommes

---

出于这个原因，我们最终决定在gulp之外进行我们的“clean”操作。我认为所谓的“串行关系”和实际的“依赖关系”之间没有明显区别。 - Evan Davis

@Mathletics，除了gulp之外，你用了什么来清理它？ - TheRealFakeNews

@AlanH rm -rf 是删除你的输出目录的命令。 - Evan Davis

Answer 1

你可以创建单独的任务通过 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']);

- Ben

---

工作正常，但有点困难。幸运的是，Gulp团队正在开发一种新的任务解决方案。 - Jan Hommes

我在清理事物方面遇到了麻烦，也许拆分成单独的清理任务比拆分监视任务更好。 - blues_driven

尝试使用 return 返回 del 调用，而不是将 cb 回调传递给它... 就像这里一样：https://github.com/gulpjs/gulp/blob/a2c9e695ecf3600f21fa731e705fd1a0503632d9/docs/recipes/delete-files-folder.md - yckart

请使用 del.sync，否则您将在某些文件被删除时添加文件。 - Dave

就是这样！对我来说解决了！ - Francis Rodrigues

Answer 2

使用 del.sync。它会完成删除操作，然后从任务中返回。

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

并确保清洁是任务列表中的第一项任务。例如，

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

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

- SonKrishna

Answer 3

直接使用该模块，因为gulp.src的成本较高。确保使用sync()方法，否则可能会产生冲突。

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

如果您想要使用gulp管道的另一种方法：

https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md。请注意，保留HTML标记。

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

- magiccrafter

Answer 4

我遇到了回调方法的问题。在删除操作完成之前，回调方法就已经运行了，导致了错误。解决方法是将删除结果返回给调用者，如下所示：

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

- Vaughn Muirhead

Answer 5

我发现了这个问题。我只是在我的任务中清理了目标文件，就像这样：

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

只需要一行代码就能解决它。希望这能对您有所帮助。

- stackFish

---

注意并发性: del 和内部的 gulp 流将同时开始。 - Ghidello

你应该使用 del.sync(patterns, [options]) 或将 gulp.src 放在回调函数中。查看 https://www.npmjs.com/package/del#del-sync-patterns-options 了解更多详情。 - Amit Choukroun

Answer 6

对于默认任务，建议使用 '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);

- Ilia luk