Wie ruft man Aufgaben in gulp mit Live-Reload auf – nachdem Dateiänderungen stattgefunden haben?

Question

Ich habe in einer Gulp-Datei die folgende Aufgabe definiert:

gulp.task('watch:livereload', function(){
  livereload.listen();
  gulp.watch('app/**').on('change', livereload.changed);
});

Was mir erst kürzlich klar wurde, dass es nur für statische Dinge wie HTML großartig ist.Weil ich Sass verwende und die App hauptsächlich js ist.Ich möchte einige von mir vordefinierte Aufgaben aufrufen, um die JS- und CSS-Dateien bei jeder Änderung neu zu kompilieren.

Die Art und Weise, wie ich Aufgaben aufgerufen habe, ist wie folgt:

gulp.task('compile:development',
  [
    'bower',
    'compile:scripts:development',
    'compile:sass:development',
    'serve',
    'watch:livereload'
  ]
);

Aber ich möchte, dass die Aufgaben bei Veränderung erledigt werden.Ideen?

Answer 1

Sie sollten es weiterhin verwenden livereload genau wie Sie, zur Aktualisierung des Browsers.Wenn Sie einige Aufgaben nach einer Änderung erneut ausführen möchten, denke ich, dass dies der Fall ist gulp.watch ist der einfache und integrierte Weg.

gulp.watch('app/**', ['compile:development']);

Oder spezifischere Aufgaben:

gulp.watch('app/**', ['compile:scripts:development', 'compile:sass:development']);

Beispiel für a watch Aufgabe, die einige definiert watchers mit unterschiedlichen tasks :

gulp.task('watch', function () {
   gulp.watch('app/sass/*', ['compile:sass:development']);
   gulp.watch('app/js/*', ['compile:scripts:development']);
});