Gulp watch - 按顺序执行任务（同步）

Question

我有一系列任务要从观察者那里运行，但我可以让他们按顺序开火：

这是 gulp 任务和观察者。

 gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});

gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

所以当我更新一个 scss 文件时，它应该编译它们创建一个单独的 css 文件。然后构建任务将该文件与供应商文件合并。但每次我保存文件时，它总是落后一步。以视频为例：http: //screencast.com/t/065gfTrY

我重命名了任务，更改了手表回调中的顺序等。

我犯了一个明显的错误吗？

原文由 Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Gulp 在“同一”时间启动所有任务，除非您声明依赖项（或使流通过管道传输到另一个）。

因此，例如，如果您希望任务 app_build_css 等待任务 app_scss 和 app_vendor_css 完成，请声明依赖项，

 gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});

gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_build_css', 'watch']);

检查 Gulp.task() 文档

原文由 AntouanK 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 GULP 3 中，我使用 run-sequence 包来帮助按顺序而不是并行地运行任务。这就是我配置我的 watch 任务的方式，例如：

 var gulp = require('gulp'),
    runSequence = require('run-sequence');

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

上面的示例显示了一个典型的 watch 任务，它将挂钩 gulp.watch 方法，其中包含在更改时要侦听的文件，以及在检测到更改时运行的回调函数。然后调用 runSequence 函数（在某个 watch 的回调中），其中包含要以同步方式运行的任务列表，这与并行运行任务的默认方式不同。

原文由 vsync 发布，翻译遵循 CC BY-SA 3.0 许可协议