Gulp 文件任务执行顺序

Question

我有这些任务：

gulp.task('clean-css', function () {
    del.sync([
        'content/bundles/css.css',
        'content/bundles/css.css.bundle',
        'content/bundles/css.min.css',
        'content/bundles/css.min.css.gz',
        'temp/css/common/*.css',
        'temp/css/user/*.css',
        'temp/css/media/*.css'])
});

gulp.task('make_css_files', ['clean-css'], function () {
  gulp.src('content/less/common/*.less').pipe(less()).pipe(gulp.dest('temp/css/common'));
    gulp.src('content/less/user/*.less').pipe(less()).pipe(gulp.dest('temp/css/user'));
    gulp.src('content/less/media/*.less').pipe(less()).pipe(gulp.dest('temp/css/media'));
});

gulp.task('make_css_bundle', ['make_css_files'], function () {
    return gulp.src(['temp/css/common/*.css', 'temp/css/user/*.css', 'temp/css/media/*.css'])
      .pipe(minifyCSS())
      .pipe(concat('css.min.css'))
      .pipe(gulp.dest('content/bundles/'))
      .pipe(gzip(gzip_options))
      .pipe(gulp.dest('content/bundles/'));
});

当我运行 make_css_bundle 它运行s:

[18:38:04] Using gulpfile C:\H\user\user\Gulpfile.js
[18:38:04] Starting 'clean-css'...
[18:38:04] Finished 'clean-css' after 86 ms
[18:38:04] Starting 'make_css_files'...
[18:38:04] Finished 'make_css_files' after 6.5 ms
[18:38:04] Starting 'make_css_bundle'...
[18:38:04] Finished 'make_css_bundle' after 21 ms
Process terminated with code 0.

然而，清理似乎运行出错了，当我检查时，没有创建缩小的 CSS。

当我删除依赖项并运行手动执行这些步骤时，它就可以工作了。

我的订单有问题吗？我认为它会运行首先是依赖项。

Answer 1

我问过 a while ago. Basically, we both have an elaborate duplicate of this question on what it means to return from a task；我建议通读最后的 link 及其 links.

您需要 return 来自任务的流来帮助 gulp 以正确的顺序执行它们。由于您在第二个任务中有 3 个不同的流，我建议使用 merge-stream 到 return 所有三个子流的一个流，合并在一起。例如：

var merge = require('merge-stream');

gulp.task('clean-css', function () {
  return del.sync([
    'content/bundles/css.css',
    'content/bundles/css.css.bundle',
    'content/bundles/css.min.css',
    'content/bundles/css.min.css.gz',
    'temp/css/common/*.css',
    'temp/css/user/*.css',
    'temp/css/media/*.css']);
});

gulp.task('make_css_files', ['clean-css'], function () {
  return merge(
    gulp.src('content/less/common/*.less').pipe(less()).pipe(gulp.dest('temp/css/common')),
    gulp.src('content/less/user/*.less').pipe(less()).pipe(gulp.dest('temp/css/user')),
    gulp.src('content/less/media/*.less').pipe(less()).pipe(gulp.dest('temp/css/media'))
  );
});

gulp.task('make_css_bundle', ['make_css_files'], function () {
  return gulp.src(['temp/css/common/*.css', 'temp/css/user/*.css', 'temp/css/media/*.css'])
    .pipe(minifyCSS())
    .pipe(concat('css.min.css'))
    .pipe(gulp.dest('content/bundles/'))
    .pipe(gzip(gzip_options))
    .pipe(gulp.dest('content/bundles/'));
});

Gulp 文件任务执行顺序

Gulp file task execution order

minify

node.js

gulp