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（）{..}？

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

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

另一种方法是使用类似run-sequence之类的东西，但我认为避免使用工具内置的功能来解决您所面临的确切问题并不能满足主观可读性方面的改进。

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

1 个答案: