web-dev-qa-db-fra.com

Gulp watch - Exécuter des tâches dans l’ordre (synchrone)

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

Voici les tâches d'abattage 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 convient de les compiler pour créer un seul fichier css. Ensuite, la tâche de construction concats le fichier avec les fichiers du fournisseur. Mais chaque fois que je sauvegarde un fichier, il y a toujours un pas en arrière. 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?

javascriptgulp
14
Lee

Gulp démarre toutes les tâches au "même" moment, à moins que vous ne déclariez des dépendances (ou que vous ne dirigiez des flux l'un vers l'autre).

Ainsi, par exemple, si vous souhaitez que la tâche app_build_css attende que les tâches app_scss et app_vendor_css soient terminées, déclarez 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érifiez la docs Gulp.task ()

19
AntouanK

Avec GULP 3, j'utilise run-sequence package pour aider à exécuter des tâches en séquence et non en parallèle. Voici comment je configure mes tâches watch, 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 illustre une tâche watch typique qui associe la méthode gulp.watch à des fichiers à écouter lors de la modification et à une fonction de rappel à exécuter lorsque la modification est détectée. La fonction runSequence est ensuite appelée (dans le rappel d'une certaine watch) avec une liste de tâches à exécuter de manière synchrone, contrairement à la méthode par défaut qui exécute des tâches en parallèle.

19
vsync

Gulp v4

Maintenant que Gulp v4 est sorti depuis presque plus d'un an (publié 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 comportait des failles de sécurité [je ne sais pas si elles ont été corrigées maintenant].

Exemple rapide

Gulp v4 introduit gulp.series et gulp.parallel. Cela vous permet de créer des tâches et de choisir celles qui sont exécutées en série, en parallèle ou mélangées, comme indiqué ci-dessous.

Explication : Ceci exécutera les tâches scss et js dans parallèle, une fois celles-ci terminées, puis exécutera la tâche watch car elles 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 dépouillé de ce à quoi mon fichier gulp peut ressembler.

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
}
1
CTS_AE