Gulp watch - exécuter les tâches dans l'ordre (synchrone)

Question

J'ai une série de tâches à exécuter à partir d'un observateur mais je peux les faire exécuter dans l'ordre :

Voici les tâches de gulp et l'observateur.

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

Ainsi, lorsque je mets à jour un fichier scss, il doit le compiler et créer un seul fichier CSS.Ensuite, la tâche de génération concatène le fichier avec les fichiers du fournisseur.Mais chaque fois que j'enregistre un fichier, j'ai toujours un pas de retard.Voir la vidéo à titre d'exemple : http://screencast.com/t/065gfTrY

J'ai renommé les tâches, modifié l'ordre dans le rappel de la montre, etc.

Est-ce que je fais une erreur évidente ?

Answer 1

Gulp démarre toutes les tâches en même temps, sauf si vous déclarez des dépendances (ou faites en sorte que les flux soient dirigés les uns vers les autres).

Ainsi, par exemple, si vous souhaitez une tâche app_build_css attendre les tâches app_scss et app_vendor_css pour compléter, déclarer les dépendances,

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

Vérifier la Documentation Gulp.task()

Answer 2

Avec GULP 3 j'utilise séquence d'exécution package pour aider à exécuter les tâches en séquence et non en parallèle.C'est ainsi que je configure mon watch tâches, par exemple :

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

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

L'exemple ci-dessus montre un exemple typique watch tâche qui va accrocher le gulp.watch méthode avec des fichiers qui doivent être écoutés lorsqu'ils sont modifiés et avec une fonction de rappel à exécuter lorsqu'un changement est détecté.Le runSequence la fonction est ensuite appelée (dans le cadre du rappel d'un certain watch) avec une liste de tâches à exécuter de manière synchrone, contrairement à la méthode par défaut qui exécute les tâches en parallèle.

Answer 3

Avaler v4

Maintenant que Gulp v4 est disponible depuis près de plus d'un an (sorti fin 2017), il offre d'excellents moyens de séquencer des tâches à l'aide de leur bibliothèque appelée bach.

https://github.com/gulpjs/bach

Note:Je recommanderais de passer à Gulp v4 car la v3 présentait certaines vulnérabilités de sécurité [je ne sais pas si celles-ci ont été corrigées maintenant].

Exemple rapide

Gulp v4 présente gulp.series et gulp.parallel, cela vous permet de créer des tâches et de choisir celles qui s'exécutent en série, en parallèle ou en mélange, comme indiqué ci-dessous.

Explication:Cela exécutera le scss et js tâches dans parallèle, une fois ceux-ci terminés, il exécutera alors le watch tâche parce qu'ils sont dans série.

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
}

Exemple étendu

Voici un exemple simplifié de ce à quoi peut ressembler mon fichier 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
}