javascript - 如何让Gulp完成一项任务，然后才开始下一项任务

Question

我设置了一些简单的 Gulp 任务来处理我的 CSS 文件。

这些任务被放在一个“主”任务中:

gulp.task('process-css', ['concatCSS', 'minifyCSS', 'renameCSS']);

仅供引用，具体任务定义如下:

gulp.task('minifyCSS', function() {
    return gulp.src('themes/my_theme/css/dist/*.css')
        .pipe(sourcemaps.init())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('themes/my_theme/css/dist/'));
});

gulp.task('concatCSS', function() {

    var files = [
        'themes/rubbish_taxi/css/bootstrap.css',
        'themes/rubbish_taxi/css/custom.css',
        'themes/rubbish_taxi/css/responsive.css',
        'themes/rubbish_taxi/css/jquery.fancybox.css'
    ];

    return gulp.src(files)
        .pipe(concat("bundle.css"))
        .pipe(gulp.dest('themes/my_theme/css/dist/'));
});

gulp.task('renameCSS', function() {
    gulp.src('themes/my_theme/css/dist/bundle.css')
        .pipe(rename(function(path) {
            path.basename += ".min";
        }))
        .pipe(gulp.dest("themes/my_theme/css/"));
});

任务完成时没有错误，但问题是 minifyCSS 不会缩小源文件。文件的未缩小版本保存为 bundle.min.css。我相信原因是 minifyCSS 在 concatCSS 完成之前运行。

如何让任务同步执行？这是我指定在给定任务之前应执行哪些任务的唯一选项，如下所示:

gulp.task('minifyCSS', ['concatCSS'], function() {..} ?

当我这样设置时它起作用了，但我想避免这种情况以使代码更具可读性。

Answer 1

gulp.task('minifyCSS', ['concatCSS'], function() {..} ?

It worked when I set it this way, but I wanted to avoid this to make code more readable.

如何更具可读性？您声明 minifyCSS 依赖于 concatCSS。我上面引用的这行代码是如何向 gulp 解释这种依赖关系的。

另一种方法是使用类似 run-sequence 的内容，但我认为避免使用工具内置的功能来解决您所面临的确切问题并不符合主观提高可读性的愿望。