Gulpfile.js oglądać najlepsze praktyki

Question

tutaj jest mój obecny obserwowanych dla moich gulpfile.js

// Gulp watchlist 
gulp.task('watch', ['browserSync', 'sass'], function(){ 
    gulp.watch('app/scss/**/*.scss', ['sass']); 
    gulp.watch('app/*.html').on('change', browserSync.reload); 
    gulp.watch('app/js/**/*.js').on('change', browserSync.reload); 
    //add more watchers here 
}); 

i to działa.

ale tutorial śledzę ma coś nieco innego:

gulp.task('watch', ['browserSync', 'sass'], function(){ 
    gulp.watch('app/scss/**/*.scss', ['sass']); 
    // Reloads the browser whenever HTML or JS files change 
    gulp.watch('app/*.html', browserSync.reload); 
    gulp.watch('app/js/**/*.js', browserSync.reload); 
}); 

muszę się .Na ('zmiana', browserSync.reload)? to działa; Jestem ciekawy, czy to, co robię, nie jest dobrą praktyką. Dzięki!

Answer 1

Nie, nie trzeba dodawać niestandardowego on('change'). Powinieneś przekazać procedurę obsługi zdarzeń podczas inicjowania obserwatora, tak jak samouczek. W przeciwnym razie jest to trochę tak, jak mówienie, że nie robisz nic, aby zmienić domyślnie, a potem dodać swojego słuchacza.

Kolejną zaletą jest to, można przejść w wielu obsługi zdarzeń w jednym kroku w postaci tablicy, jeśli teleskopowe są łykać zadania sobie gulp.watch(..., ['task1', 'task2']) zamiast łączenia on('change', task1Function).on('change', task2Function)

Answer 2

Gulp watch zawsze zwraca EventEmitter emitujący zdarzenia zmian, więc wywołanie gulp.watch('app/*.html').on('change', browserSync.reload) można zapisać jako:

var watcher = gulp.watch('app/*.html'); 
watcher.on('change', browserSync.reload); 

watch funkcja może być wywołana z następującymi params: gulp.watch(glob [, opts], tasks) lub gulp.watch(glob [, opts, cb]).

Możesz więc użyć obu wariantów, ale preferowana jest metoda krótsza.