如何正确使用gulp来清理项目？ [英] How to clean a project correctly with gulp?

问题描述

在咕嘟网页上有以下示例：

<$ （'clean'，function（cb）{
//你可以像使用`gulp.src`一样使用多个匹配模式
del（ ['build']，cb）;
}）;
$ b $ gulp.task（'scripts'，['clean']，function（）{
//缩小并复制所有JavaScript（供应商脚本除外）
return gulp.src （paths.scripts）
.pipe（coffee（））
.pipe（uglify（））
.pipe（concat（'all.min.js'））
。 pipe（gulp.dest（'build / js'））;
}）;

//复制所有静态图片
gulp.task（'images'，['clean']，function（）{
return gulp.src（paths.images）
//将选项传递给任务
.pipe（imagemin（{optimizationLevel：5}））
.pipe（gulp.dest（'build / img'））;
}）;

//文件更改时的任务
gulp.task（'watch'，function（）{
gulp.watch（paths.scripts，['scripts']） ;
gulp.watch（paths.images，['images']）;
}）;

//默认任务（当你从cli运行`gulp`时调用）
gulp.task（'default'，['watch'，'scripts'，'images']） ;

这个效果很好。但是 watch 任务存在一个大问题。如果我更改图像，watch任务会检测它并运行 images 任务。这对也有依赖关系（ gulp.task（'images'，** ['clean'] **，function（）{）。干净任务，所以这也运行，但比我的脚本文件丢失，因为脚本任务没有重新开始，清理任务删除所有文件。

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

解决方案

您可以通过 watch 触发单独的任务：

  gulp.task（'clean'，function（cb）{
 //你可以像使用`gulp一样使用多个匹配模式.src` 
 del（['build']，cb）; 
}）; 
 
 var scripts = function（）{
 //缩小并复制所有JavaScript（供应商脚本除外）
 return gulp.src（paths.scripts）
 .pipe（coffee（））
 .pipe（uglify（））
 .pipe（concat（ 'all.min.js'））
 .pipe（gulp.dest（'build / js'））; 
}; 
 gulp.task（'脚本'，['干净']，脚本）; 
 gulp.task（'scripts-watch'，scripts）; 
 
 //复制所有静态图片
 var images = function（）{
 return gulp.src（paths.images）
 //将选项传递给任务
 .pipe（imagemin（{optimizationLevel：5}））
 .pipe（gulp.dest（'build / img'））; 
}; 
 gulp.task（'images'，['clean']，图片）; 
 gulp.task（'images-watch'，images）; 
 
 //文件更改时的任务
 gulp.task（'watch'，function（）{
 gulp.watch（paths.scripts，['scripts-watch' ]）; 
 gulp.watch（paths.images，['images-watch']）; 
}）; 
 
 //默认任务（当你从cli运行`gulp`时调用）
 gulp.task（'default'，['watch'，'scripts'，'images']） ; 
  

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?

解决方案

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

这篇关于如何正确使用gulp来清理项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！