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时，它会运行：

[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

我前一段时间问了similar question。基本上，我们都有this question on what it means to return from a task的精心复制品;我建议阅读最后一个链接及其链接。

您需要从任务中返回流，以帮助gulp以正确的顺序执行这些操作。由于在第二个任务中有3个不同的流，我建议使用merge-stream返回所有三个子流中的一个流，合并在一起。 E.g：

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文件任务执行顺序

1 个答案: