Gulp watch - execute tarefas em ordem (síncrono)

Question

Tenho uma série de tarefas a serem executadas a partir de um observador, mas posso ativá-las em ordem:

Aqui estão as tarefas e o observador do 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']);

Então, quando eu atualizo um arquivo scss, ele deve compilá-los e criar um único arquivo css.Em seguida, a tarefa de construção concatena o arquivo com os arquivos do fornecedor.Mas toda vez que salvo um arquivo, ele está sempre um passo atrás.Veja o vídeo como exemplo: http://screencast.com/t/065gfTrY

Renomeei as tarefas, alterei a ordem no retorno de chamada do relógio, etc.

Estou cometendo um erro óbvio?

Answer 1

O Gulp inicia todas as tarefas ao mesmo tempo, a menos que você declare dependências (ou faça os fluxos canalizarem um para o outro).

Então, por exemplo, se você quiser que a tarefa app_build_css esperar pelas tarefas app_scss e app_vendor_css para completar, declare as dependências,

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

Verifica a Documentos Gulp.task()

Answer 2

Com o GULP 3 eu uso sequência de execução pacote para ajudar a executar tarefas em sequência e não em paralelo.É assim que eu configuro meu watch tarefas, por exemplo:

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

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

O exemplo acima mostra um típico watch tarefa que irá prender o gulp.watch método com arquivos que serão ouvidos quando alterados e com uma função de retorno de chamada a ser executada quando a alteração for detectada.O runSequence função é então chamada (dentro do retorno de chamada de um determinado watch) com uma lista de tarefas a serem executadas de maneira síncrona, diferentemente da forma padrão que executa tarefas em paralelo.

Answer 3

Gole v4

Agora que o Gulp v4 foi lançado há quase mais de um ano (lançado no final de 2017), ele oferece ótimas maneiras de sequenciar tarefas usando sua biblioteca chamada bach.

https://github.com/gulpjs/bach

Observação:Eu recomendaria mudar para o Gulp v4, já que a v3 tinha algumas vulnerabilidades de segurança [não tenho certeza se elas foram corrigidas agora].

Exemplo rápido

Gulp v4 apresenta gulp.series e gulp.parallel, isso permite criar tarefas e escolher quais serão executadas em série, paralela ou mista, conforme mostrado abaixo.

Explicação:Isso executará o scss e js tarefas em paralelo, uma vez concluídos, ele executará o watch tarefa porque eles estão em Series.

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

Exemplo estendido

Aqui está um exemplo simplificado de como pode ser a aparência do meu arquivo gulp.

const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');

const paths = {
  scss: [
    'public/stylesheets/*.scss'
  ],
  js: [
    'public/js/*.js'
  ]
};

const scss = () => {
  return gulp.src(paths.scss)
    .pipe(gulpScss)
    .pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';

const js = () => {
  return gulp.src(paths.js)
    .pipe(gulpBabel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';

const watch = () => {
  gulp.watch(paths.scss, scss);
  gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}