Gulp смотреть - выполнять задачи в порядке (синхронно)

У меня есть ряд задач, которые нужно запустить от наблюдателя, но я могу заставить их стрелять по порядку:

Вот задачи и наблюдатели 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

Я переименовал задачи, изменил порядок в обратном вызове и т.д.

Я делаю очевидную ошибку?

Ответ 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() docs

Ответ 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) со списком задач для запуска синхронным образом, в отличие от метода по умолчанию, который запускает задачи параллельно.