Gulps gulp.watch n'est pas déclenché pour les fichiers nouveaux ou supprimés?

La tâche Gulpjs suivante fonctionne correctement lors de l'édition 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 (il 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, cela ne semble 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 . Globs commençant par ./(c'était la valeur de src) ne semble pas fonctionner ATM.

Edit: fonctionne apparemment gulp.watchavec des fichiers nouveaux ou supprimés maintenant. Ce n'était pas le cas lorsque la question a été posée.

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

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

Pour obtenir une surveillance de fichiers capable de rechercher de nouveaux fichiers, utilisez le gulp-watchplugin , 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 par fichier beaucoup plus rapides. Cela fonctionne très bien pendant le développement avec livereload tant que vous ne concaténez aucun fichier.

Vous pouvez encapsuler vos flux soit en utilisant ma lazypipebibliothèque , soit simplement en utilisant une fonction et stream-combinercomme ceci:

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

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

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

MISE À JOUR 15 octobre 2014

Comme indiqué par @pkyeck ci-dessous, apparemment la version 1.0 de gulp-watcha légèrement changé le format, donc les exemples ci-dessus devraient maintenant ê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());

Les deux gulp.watch()et require('gulp-watch')()se déclencheront pour les fichiers nouveaux / 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');
   //});

S'il srcs'agit d'un chemin absolu (commençant par /), votre code ne détectera pas les fichiers nouveaux ou supprimés. Cependant, il y a encore un moyen:

Au lieu de:

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

écrire:

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

et cela fonctionnera!

Globs doit 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 estprocess.cwd()

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

Maintenant, dans la documentation Gaze, nous pouvons trouver que le répertoire de travail actuel (répertoire de base glob) est l' cwdoption.

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

Je sais que c'est une question plus ancienne, mais j'ai pensé jeter la solution que j'ai trouvée. Aucun des plugins gulp que j'ai trouvés ne m'avertirait de nouveaux fichiers ou de fichiers renommés. J'ai donc fini par emballer le monocle dans une fonction de commodité.

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 dois noter que gulpStart est également une fonction pratique que j'ai créée.

Et voici le module de montre réel.

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 peut être trouvé dans mon kit de démarrage gulp: https://github.com/chrisdavies/gulp_starter_kit

Il est important de noter que cela ressemble à gulp.watch ne signale que les fichiers modifiés et supprimés sous Windows mais écoute les fichiers nouveaux et supprimés par défaut sur OSX:

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

Vous devriez utiliser 'gulp-watch' pour les fichiers nouveaux / 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));
    });
});