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

lee 发表于 Dev

背风处

我有一系列要由观察者运行的任务，但可以按顺序执行：

这是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

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

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

安图万

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']);