web-dev-qa-db-fra.com

Gulp v4 watch task


Je viens de passer à Gulp v4 et je me demandais pourquoi mon gulpfile ne fonctionnait plus.
J'ai essayé le nouveau code de la nouvelle documentation mais cela n'a pas fonctionné comme prévu car j'utilise des postcss "purs".
J'ai donc recherché mon problème sur Google et trouvé cette question: Erreur Gulp: la tâche de surveillance doit être une fonction
Cependant, ce n'était pas non plus une solution à mon problème, bien que j'obtienne le même message d'erreur Error: watching src/styles/**/*.scss: watch task has to be a function

J'ai actuellement ce code

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

et quand je change
gulp.watch('src/styles/**/*.scss', ['styles']);
à
gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
il me donne juste un Starting 'default'... et après avoir changé un fichier Starting 'styles'...
avec Gulp 3.9 c'était

Starting 'default'...
Finished 'default' after 174 ms

et après avoir changé un fichier

Starting 'styles'...
Finished 'styles' after 561 μs

J'ai maintenant essayé beaucoup de choses différentes mais je n'arrive pas à le faire fonctionner comme avant. Je pense vraiment à passer au webpack comme les enfants cool maintenant. Mais Gulp a toujours bien fonctionné.

Quelqu'un peut-il m'expliquer ce que je fais mal?

npmgulppostcss
5
obencs

J'ai juste oublié de revenir ...
return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
et
return gulp.src('src/styles/main.scss')

Code complet:

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    return gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});
7
obencs

J'ai eu du mal avec celui-ci moi-même ..

m'a pris des heures de maux de tête pour découvrir que, fondamentalement, tout change avec la v4.0

J'ai exécuté mon code comme ça et cela fonctionne parfaitement ...

//Do everything once!
  gulp.task('default', function(){
    gulp.watch('src/styles/*.css', gulp.series('css')),
    gulp.watch('src/html/*.html', gulp.series('copyHTML')),
    gulp.watch('src/js/*.js', gulp.series('scripts')),
    gulp.watch('src/images/*', gulp.series('imageMIN'));
  return
});
9
RealMJDev

Peut être utilisé via un événement

function watch() {
    const watcher = gulp.watch('src/styles/**/*.scss');
    watcher.on('change', function(path, stats) {
        styles(); //styles task
    });
}

exports.default = gulp.series(watch);
1
Vlone

Juste au cas où quelqu'un d'autre trébucherait sur ce sujet (comme je l'ai fait), essayant de résoudre Gulp ne fonctionnant pas après la mise à niveau, j'ai trouvé qu'il n'y avait vraiment que deux choses qui comptaient pour moi (après avoir essayé des centaines) -

  1. "\\" pour les séparateurs de chemin ne fonctionne plus sous Windows. "/" est le seul chemin à parcourir. Ce fut le point de douleur le plus long pour moi. Probablement mieux de le faire de cette façon de toute façon, car cela le rend multiplateforme - mais j'étais sur un projet Windows uniquement à l'époque.
  2. Assurez-vous d'émettre un rappel si vous appelez une série de tâches ou renvoyez une promesse. Ce n'était pas évident pour moi exactement quand cela était nécessaire, et le laisser de côté me causait une douleur majeure. C'est quelque chose comme ça:
gulp.task('js', (done) => {
    gulp.src(src)
        .pipe(task())
        .pipe(task(etc))
        //etc
        .pipe(gulp.dest(dst));
    done();
});

J'utilise spécifiquement l'ancien style dans mon exemple ci-dessus pour démontrer que la façon dont vous le faites n'a pas vraiment d'importance. Gulp est très indulgent, mais c'est un bâton sur les rappels et les chemins. Je pense que la chose des chemins est en fait liée à chokidar ou à un sous-module que gulp utilise.

J'espère que cela vous évitera de la douleur.

0
dgo