web-dev-qa-db-fra.com

Gulps gulp.watch non déclenché pour les fichiers nouveaux ou supprimés?

La tâche Gulpjs suivante fonctionne correctement lors de la modification de fichiers dans la correspondance globale:

// watch task.
gulp.task('watch', ['build'], function () {
    gulp.watch(src + '/js/**/*.js', ['scripts']);
    gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
    gulp.watch(src + '/less/*.less', ['styles']);
    gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});

// build task.
gulp.task('build', ['clean'], function() {
    return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});

Cependant, cela ne fonctionne pas (ce n'est pas déclenché) pour les fichiers nouveaux ou supprimés. Y a-t-il quelque chose qui me manque?

EDIT: même en utilisant le plugin grunt-watch, il semble ne pas fonctionner:

gulp.task('scripts', function() {
    return streamqueue(
        { objectMode: true },
        gulp.src([
            vendor + '/jquery/dist/jquery.min.js',
            vendor + '/bootstrap/dist/js/bootstrap.min.js'
        ]),
        gulp.src([
            src + '/js/**/*.js'
        ]).pipe(plugins.uglify())
    )
    .pipe(plugins.concat(pkg.name + '.min.js'))
    .pipe(gulp.dest(dest + '/js/'));
});

gulp.task('watch', ['build'], function () {
    plugins.watch({glob: src + '/js/**/*.js'}, function () {
        gulp.start('scripts');
    });
});

EDIT: résolu, c'était ce problème . Les globes commençant par ./ (c'était la valeur de src) ne semblent pas fonctionner dans l'ATM.

javascriptnode.jsgulp
150
gremo

Edit: Apparemment, gulp.watch fonctionne maintenant avec les fichiers nouveaux ou supprimés. Ce n'était pas le cas lorsque la question a été posée.

Le reste de ma réponse est toujours valable: gulp-watch est généralement une meilleure solution car elle vous permet d’effectuer des actions spécifiques uniquement sur les fichiers modifiés, alors que gulp.watch vous permet uniquement d’exécuter des tâches complètes. Pour un projet de taille raisonnable, cela deviendra rapidement trop lent pour être utile.

Vous ne manquez rien. gulp.watch ne fonctionne pas avec les fichiers nouveaux ou supprimés. C'est une solution simple conçue pour des projets simples.

Pour que les fichiers puissent être surveillés et qu'ils puissent rechercher de nouveaux fichiers, utilisez le plugin gulp-watch , qui est beaucoup plus puissant. L'utilisation ressemble à ceci:

var watch = require('gulp-watch');

// in a task
watch({glob: <<glob or array of globs>> })
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
    gulp.start( <<task name>> );
});

Personnellement, je recommande la première option. Cela permet des processus beaucoup plus rapides, par fichier. Cela fonctionne très bien pendant le développement avec livereload tant que vous ne concaténez aucun fichier.

Vous pouvez encapsuler vos flux en utilisant ma lazypipe bibliothèque , ou simplement en utilisant une fonction et stream-combiner comme ceci:

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch({glob: 'src/scripts/**/*.js' })
        .pipe(scriptsPipeline());

UPDATE 15 octobre 2014

Comme souligné par @pkyeck ci-dessous, apparemment la version 1.0 de gulp-watch a légèrement modifié le format. Les exemples ci-dessus devraient donc être:

var watch = require('gulp-watch');

// in a task
watch(<<glob or array of globs>>)
        .pipe( << add per-file tasks here>> );

// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
    gulp.start( <<task name>> );
});

et

var combine = require('stream-combiner');

function scriptsPipeline() {
    return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}

watch('src/scripts/**/*.js')
        .pipe(scriptsPipeline());
126
OverZealous

gulp.watch() et require('gulp-watch')() déclencheront pour les nouveaux fichiers/supprimés mais pas si vous utilisez des répertoires absolus. Dans mes tests, je n'ai pas utilisé "./" pour les répertoires relatifs BTW.

Les deux ne se déclencheront pas si des répertoires entiers sont supprimés.

   var watch = require('gulp-watch');
   //Wont work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though.
   //gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {

   //gulp.watch('src/app1/reports/**/*', function (event) {
   // console.log('*************************** Event received in gulp.watch');
   // console.log(event);
   // gulp.start('localDeployApp');
   });

   //Won't work for new files until gaze is fixed if using absolute dirs. It  won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
   //watch(config.localDeploy.path + '/reports/**/*', function() {

   watch('src/krfs-app/reports/**/*', function(event) {
      console.log("watch triggered");
      console.log(event);
      gulp.start('localDeployApp');
   //});
85
Nestor Urquiza

Si src est un chemin absolu (commençant par /), votre code ne détectera pas les fichiers nouveaux ou supprimés. Cependant, il y a toujours un moyen:

Au lieu de:

gulp.watch(src + '/js/**/*.js', ['scripts']);

écrire:

gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

et ça va marcher!

56
alexk

Les répertoires globaux doivent avoir un répertoire de base distinct spécifié et cet emplacement de base ne doit pas être spécifié dans le glob lui-même.

Si vous avez lib/*.js, il regardera sous le répertoire de travail actuel qui est process.cwd()

Gulp utilise Gaze pour regarder des fichiers et dans le Gulp API doc , nous voyons que nous pouvons transmettre des options spécifiques à Gaze à la fonction de surveillance: gulp.watch(glob[, opts], tasks)

Dans le Gaze doc , nous pouvons constater que le répertoire de travail actuel (répertoire de base global) est l’option cwd.

Ce qui nous amène à la réponse d'Alexk: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

7
Peter Perron

Je sais que c'est une question plus ancienne, mais je pensais que je proposerais la solution que j'ai proposée. Aucun des plugins gulp que j'ai trouvés ne m'avertirait des fichiers nouveaux ou renommés. Je me suis donc retrouvé à emballer monocle dans une fonction pratique.

Voici un exemple d'utilisation de cette fonction: 

watch({
    root: config.src.root,
    match: [{
      when: 'js/**',
      then: gulpStart('js')
    }, {
      when: '+(scss|css)/**',
      then: gulpStart('css')
    }, {
      when: '+(fonts|img)/**',
      then: gulpStart('assets')
    }, {
      when: '*.+(html|ejs)',
      then: gulpStart('html')
    }]
  });

Je devrais noter que gulpStart est aussi une fonction pratique que j'ai créée.

Et voici le module de veille.

module.exports = function (options) {
  var path = require('path'),
      monocle = require('monocle'),
      minimatch = require('minimatch');

  var fullRoot = path.resolve(options.root);

  function onFileChange (e) {
    var relativePath = path.relative(fullRoot, e.fullPath);

    options.match.some(function (match) {
      var isMatch = minimatch(relativePath, match.when);
      isMatch && match.then();
      return isMatch;
    });
  }

  monocle().watchDirectory({
    root: options.root,
    listener: onFileChange
  });
};

Assez simple, hein? Le tout se trouve dans le kit de démarrage de mon groupe: https://github.com/chrisdavies/gulp_starter_kit

2
Christopher Davies

Il est important de noter qu'il semble que gulp.watch signale uniquement les fichiers modifiés et supprimés sous Windows, mais écoute les nouveaux fichiers et les fichiers supprimés par défaut sous OSX:

https://github.com/gulpjs/gulp/issues/675

1
Brian Ogden

Vous devez utiliser 'gulp-watch' pour les nouveaux fichiers/renommés/supprimés au lieu de gulp.watch

var gulpwatch = require('gulp-watch');
var source = './assets',  
destination = './dest';
gulp.task('copy-changed-assets', function() {
    gulpwatch(source+'/**/*', function(obj){
        gulp.src( obj.path, { "base": source})
        .pipe(gulp.dest(destination));
    });
});
0
Jitendra Saroj