Gulp watch: ejecuta tareas en orden (sincrónico)

Question

Tengo una serie de tareas que ejecutar desde un observador, pero puedo hacer que se ejecuten en orden:

Aquí están las tareas de trago y el observador.

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

Entonces, cuando actualizo un archivo scss, debería compilarlos y crear un único archivo css.Luego, la tarea de compilación concatena el archivo con los archivos del proveedor.Pero cada vez que guardo un archivo, siempre va un paso por detrás.Vea el vídeo como ejemplo: http://screencast.com/t/065gfTrY

Cambié el nombre de las tareas, cambié el orden en la devolución de llamada del reloj, etc.

¿Estoy cometiendo un error obvio?

Answer 1

Gulp inicia todas las tareas al "mismo" tiempo, a menos que declare dependencias (o haga que las transmisiones se conecten entre sí).

Así, por ejemplo, si quieres una tarea app_build_css esperar tareas app_scss y app_vendor_css para completar, declarar las dependencias,

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

Comprobar el Gulp.task() documentos

Answer 2

Con GULP 3 uso secuencia de ejecución paquete para ayudar a ejecutar tareas en secuencia y no en paralelo.Así configuro mi watch tareas, por ejemplo:

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

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

El ejemplo anterior muestra un típico watch tarea que enganchará al gulp.watch método con archivos que se escucharán cuando se modifiquen y con una función de devolución de llamada para ejecutar cuando se detecte un cambio.El runSequence Luego se llama a la función (dentro de la devolución de llamada de un determinado watch) con una lista de tareas para ejecutar de forma sincrónica, a diferencia de la forma predeterminada que ejecuta tareas en paralelo.

Answer 3

trago v4

Ahora que Gulp v4 ha estado disponible durante casi más de un año (lanzado a finales de 2017), ofrece excelentes formas de secuenciar tareas utilizando su biblioteca llamada bach.

https://github.com/gulpjs/bach

Nota:Recomendaría pasar a Gulp v4 ya que la v3 tenía algunas vulnerabilidades de seguridad [no estoy seguro si ya se han solucionado].

Ejemplo rápido

Gulp v4 presenta gulp.series y gulp.parallel, esto le permite crear tareas y elegir cuáles se ejecutan en serie, en paralelo o mixtas, como se muestra a continuación.

Explicación:Esto ejecutará el scss y js tareas en paralelo, una vez que estén completos, ejecutará el watch tarea porque están en serie.

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
}

Ejemplo extendido

Aquí hay un ejemplo simplificado de cómo podría verse mi archivo 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
}