Search code examples
javascriptgulpgulp-sassgulp-watch

Gulpfile.js watch best practice

here is my current watchlist for my 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
});

and this works.

but a tutorial i am following has something slightly different:

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

do I need the .on('change', browserSync.reload)? it works; I'm just curious if what i'm doing isn't good practice. Thanks!

Solution

  • No, you don't need to add custom on('change'). You should pass the event handler when initializing the watcher like the tutorial. Otherwise, it's sort of like telling gulp to do nothing on change by default then add your listener afterwards.

    Another advantage is you can pass in multiple event handlers in one go as an array if your handlers are gulp tasks themselves gulp.watch(..., ['task1', 'task2']) instead of chaining on('change', task1Function).on('change', task2Function)