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

我已重命名任务,更改了手表回调中的顺序等.

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

Answer 1

使用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),其中任务列表以同步方式运行,这与并行运行任务的默认方式不同.

Answer 2

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()文档