问题描述
在上有以下示例:
<$ ('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来清理项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!