webentwicklung-frage-antwort-db.com.de

Gulps gulp.watch nicht für neue oder gelöschte Dateien ausgelöst?

Die folgende Gulpjs-Aufgabe funktioniert gut, wenn Sie Dateien im Glob-Match bearbeiten:

// 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');
});

Es funktioniert jedoch nicht (es wird nicht ausgelöst) für neue oder gelöschte Dateien. Fehlt mir etwas?

EDIT: Selbst mit dem Grunt-Watch-Plugin scheint es nicht zu funktionieren:

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: Gelöst wurde es dieses Problem . Globs beginnend mit ./ (das war der Wert von src) scheinen ATM nicht zu funktionieren.

150
gremo

Edit: Offensichtlich arbeitet gulp.watch jetzt mit neuen oder gelöschten Dateien. Als die Frage gestellt wurde, war dies nicht der Fall.

Der Rest meiner Antwort bleibt bestehen: gulp-watch ist normalerweise eine bessere Lösung, da Sie bestimmte Aktionen nur für die Dateien ausführen können, die geändert wurden. Mit gulp.watch können Sie nur vollständige Aufgaben ausführen. Bei einem Projekt mit angemessener Größe wird dies schnell zu langsam, um nützlich zu sein.


Sie vermissen nichts. gulp.watch funktioniert nicht mit neuen oder gelöschten Dateien. Es ist eine einfache Lösung für einfache Projekte.

Um Dateien anzusehen, die nach neuen Dateien suchen, verwenden Sie das gulp-watch-Plugin , das wesentlich leistungsfähiger ist. Die Nutzung sieht so aus:

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>> );
});

Ich persönlich empfehle die erste Option. Dies ermöglicht wesentlich schnellere Prozesse pro Datei. Es funktioniert während der Entwicklung mit der Leberlast gut, solange Sie keine Dateien verketten.

Sie können Ihre Streams entweder mit my lazypipe library oder einfach mit einer Funktion und stream-combiner wie folgt zusammenfassen:

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. Oktober 2014

Wie in @pkyeck unten dargelegt, hat das 1.0-Release von gulp-watch offenbar das Format leicht geändert, daher sollten die obigen Beispiele nun folgende sein:

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>> );
});

und

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

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

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

Sowohl gulp.watch() als auch require('gulp-watch')() werden für neue/gelöschte Dateien ausgelöst, jedoch nicht bei Verwendung absoluter Verzeichnisse. In meinen Tests habe ich "./" nicht für relative Verzeichnisse verwendet.

Beide werden jedoch nicht ausgelöst, wenn ganze Verzeichnisse gelöscht werden.

   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

Wenn src ein absoluter Pfad ist (beginnend mit /), erkennt Ihr Code keine neuen oder gelöschten Dateien. Es gibt jedoch noch einen Weg:

Anstatt:

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

schreiben:

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

und es wird funktionieren!

56
alexk

Für Globs muss ein separates Basisverzeichnis angegeben werden, und dieser Basisspeicherort darf nicht im glob selbst angegeben werden.

Wenn Sie lib/*.js haben, wird unter dem aktuellen Arbeitsverzeichnis nachgesehen. Dies ist process.cwd()

Gulp verwendet Gaze zum Ansehen von Dateien und in der Gulp API doc sehen wir, dass wir Gaze-spezifische Optionen an die Überwachungsfunktion übergeben können: gulp.watch(glob[, opts], tasks)

Jetzt im Blick doc können wir feststellen, dass das aktuelle Arbeitsverzeichnis (glob base dir) die Option cwd ist.

Was uns zu Alexks Antwort führt: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

7
Peter Perron

Ich weiß, das ist eine ältere Frage, aber ich dachte, ich würde die Lösung werfen, die ich mir ausgedacht habe. Keines der gulp-Plugins, die ich gefunden habe, würde mich über neue oder umbenannte Dateien informieren. Also habe ich Monokel in eine Convenience-Funktion verpackt.

Hier ein Beispiel, wie diese Funktion verwendet wird: 

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

Ich sollte beachten, dass gulpStart auch eine Komfortfunktion ist, die ich erstellt habe.

Und hier ist das eigentliche Uhrenmodul.

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
  });
};

Ganz einfach, wie? Das Ganze ist in meinem Schluck-Starter-Kit zu finden: https://github.com/chrisdavies/gulp_starter_kit

2

Es ist wichtig zu wissen, dass es so aussieht, als ob gulp.watch nur geänderte und gelöschte Dateien unter Windows meldet, aber standardmäßig unter OSX nach neuen und gelöschten Dateien sucht:

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

1
Brian Ogden

Sie sollten 'gulp-watch' anstelle von gulp.watch für neue/umbenannte/gelöschte Dateien verwenden

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