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

2022-01-12 00:00:00 javascript gulp

在 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 任务存在一个大问题.如果我更改图像，监视任务会检测到它并运行 images 任务.这对 clean 任务也有依赖 (gulp.task('images', **['clean']**, function() {))，所以这个也运行.但是我的脚本文件丢失了，因为 scripts 任务没有再次启动，并且 clean 任务删除了所有文件.

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.

如何在第一次启动时运行 clean 任务并保留依赖项?

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

推荐答案

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

相关文章