Gulp: Watching Sass files for changes

16 Apr 2017 0 comments

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'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'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(){'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"
Share this article :

Post a Comment

Support : GDDon | Creating Website | Gddon |
Copyright © 2013. Computer Tricks and Tips for System - All Rights Reserved
Template Created by Creating Website Modify by GDDon.Com
Proudly powered by Blogger