为什么 Gulp 在运行依赖于 'clean' 任务的任务之前不会完成 'clean' 任务？

Question

我有一个gulpfile，应该在压缩代码之前清理我的dist目录。有时，在压缩代码时清理任务仍在运行，导致一些文件丢失。

问题是什么？我的理解是，任务的依赖关系将在任务运行之前完成，并且即使它是多个任务的依赖项，依赖项也只会运行一次。

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
var del = require('del');

gulp.task('default', ['css', 'js', 'fonts']);

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

gulp.task('css', ['clean'], function() {
  return gulp.src('style.css')
            .pipe(plugins.autoprefixer({
              browsers: ['last 2 versions']
            }))
            .pipe(gulp.dest('dist'))
            .pipe(plugins.minifyCss({
              noRebase: true,
              keepSpecialComments: 0
            }))
            .pipe(plugins.rename({extname: '.min.css'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('js', ['clean'], function() {
  return gulp.src('scripts.js')
            .pipe(gulp.dest('dist'))
            .pipe(plugins.uglify({preserveComments: 'some'}))
            .pipe(plugins.rename({extname: '.min.js'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('fonts', ['clean'], function() {
  return gulp.src('fonts/*')
            .pipe(gulp.dest('dist/fonts'));
});

更新：Gulp输出显示清理任务在其他任务开始之前已完成，但有时并不是所有的输出文件都在dist目录中，有时候会出现。

[09:47:15] Using gulpfile /Users/raddevon/Documents/projects/AlphaBlog/theme/gulpfile.js
[09:47:15] Starting 'clean'...
[09:47:15] Finished 'clean' after 8.06 ms
[09:47:15] Starting 'css'...
[09:47:15] Starting 'js'...
[09:47:16] Starting 'fonts'...
[09:47:16] Finished 'js' after 399 ms
[09:47:16] Finished 'css' after 899 ms
[09:47:16] Finished 'fonts' after 267 ms
[09:47:16] Starting 'default'...
[09:47:16] Finished 'default' after 7.78 μs

- raddevon

---

顺便问一下，为什么你在每个任务中都要多次使用 .pipe(gulp.dest('dist'))？ - Oleg

@Oleg 我想要未压缩和压缩后的文件都在我的 dist 目录中。 - raddevon

你是怎么判断 clean 任务在其他任务开始运行之前没有完成的？你能贴出一些 Gulp 的输出吗？ - Ben

也许你应该改成：del(['dist/**/*'], cb); - Slawa Eremin

你解决了这个问题吗？我也遇到了类似的问题，但是无法弄清楚。 - JacobTheDev

Answer 1

使用 del.sync()，其他任务只会在清理任务完成后开始执行。

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

另请查看此线程： 如何使用gulp正确清理项目？

- magiccrafter

Answer 2

请查看 按顺序运行任务，来自于Gulp文档。

如果您只想有一个干净的任务，请尝试返回每个流，就像上面第二个例子一样，看看是否有帮助。

我个人更喜欢将清理任务更具体化（更像第一个例子），因此您可以尝试类似以下方式：

...

// minify css
gulp.task('clean:css', function(cb) {
  del(['dist/*.css'], cb);
});

gulp.task('comp:css', ['clean:css'], function(cb) {
  return gulp.src('style.css')
    .pipe(minifyCss())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(build.css), cb);
});

gulp.task('css', ['comp:css']);

// concat js
gulp.task('clean:js', function(cb) {
  del(['dist/*.js'], cb);
});

// and so on

- mw_

---

谢谢你的建议。我没有注意到这个例子中的问题。也许你可以为我澄清一个问题：为什么将gulp代码分配给变量然后返回变量与返回gulp代码的输出不同呢？那样难道不会返回一个流吗？ - raddevon

那个更改似乎没有帮助。第一次运行，我得到了除非缩小的脚本文件之外的所有文件。第二次运行，我有了除了缩小的脚本之外的所有文件。仍然不一致。 - raddevon

说实话，我不确定。我认为发生的情况是您的初始清理任务作为依赖项被调用了3次。因此，即使这些任务在技术上同时运行，也可能有一个任务在另一个任务开始之前就已经完成了。因此，任务1完成并写入其文件，然后任务2甚至开始之前就擦除了该目录，再次从任务1中删除这些文件，等等，这可以解释您所遇到的结果。 - mw_

这绝对符合我所看到的结果，但与在一个系列示例中运行任务的评论相反。它明确表示依赖项只会运行一次，即使在代码中重复出现。不确定为什么它表现异常。感谢您的帮助。 - raddevon

没问题。我认为可能是你的路径设置有问题。确保绝对是干净的任务出了问题。手动运行其他任务一次，并确保一切都正确输出。我还注意到你的gulpfile与style.css和scripts.js在同一个目录中，是吗？你的字体任务是否正常工作？我注意到它是'fonts/*'；难道不应该是'dist/fonts/*'吗？ - mw_