Gulp: Watching Sass files for changes

Gulp provides us with a watch method that checks to see if a file was saved. The syntax for the watch method is:

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

If we want to watch all Sass files and run the sass task whenever a Sass file is saved, we just have to replace files-to-watch with the app/scss/**/*.scss, and ['tasks', 'to', 'run'] with ['sass']:

// Gulp watch syntax
gulp.watch('app/scss/**/*.scss', ['sass']);

More often though, we'll want to watch more than one type of file at once. To do so, we can group together multiple watch processes into a watch task:

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // Other watchers

})

If you ran the gulp watch command right now, you'll see that Gulp starts watching immediately.

And that it automatically runs the sass task whenever you save a .scss file.

Let's take it a step further and make Gulp reload the browser whenever we save a .scss file with the help of Browser Sync.
Click here for For next Step:  "Live-reloading with Browser Sync"

Table of Contents:  "Table of Contents to learn"