Select Page
Gulp watch – Transpile Sass to CSS on the fly

Gulp watch – Transpile Sass to CSS on the fly

Gulp watch is the command that will stare without blinking at your files and detect saves upon those files. #stalker-detected

All jokes aside…

This is a serious matter. Imagine if you could only click ctrl+s and have files compiled, transpiled, minified, whatever you wanna do instantly without going back to the terminal and running gulp sass …? Yeap. I know your pain.

First of all… We’re going to continue onward from this tutorial. If you have not already completed it – just do it. (I am not affiliated with Nike in any way)
If you completed it already and have the files on hand… let’s dig right in!

First of all, globals explained

Globals in Node (hence, Gulp as well), or globs as everyone refers to them, are file pattern detection expressions that allow you to mass select certain file types (for example). Simplest example would be *.scss, which will totally select only Scss files we have in certain folder.

Most of the projects, depending on their size, of course, will not require you to know more than 3 or 4 such globs. I personally usually use only the last one in the following list.

  1.  *.sass <- This syntax is the most simple way to select a file, irrelevant on the file’s actual name, and relies on the file’s directory location.
    • Pros: Gives you more control on the sass files that are actually going to be watched/worked with
    • Cons: You’re limited to keep all scss files in one folder. I think it’s oke, but for massive framework builds, who wouldn’t wanna have this directory structure:

      …list goes on. 🙂
  2. *.+(scss|sass) <- This structure will enable you to watch for multiple extensions/patterns as specified. This specific script can go ahead and watch for file saves on both scss and sass files. You can add up more extensions followed by the | (pipe) symbol.
    • Pros: Gives you more flexibility on the pattern and type of what you wanna glob for
    • Cons: None really
  3. !avoid-me-I-stink.scss <- This syntax that has the ! mark in front will tell the watcher not to include this file. In most of the programming languages the ! means the word not, really, or negation of some sort.
    • Pros: If there are files that shouldn’t be included into the gulp watcher method, for example, this is the way to go
    • Cons: Files’ feelings get hurt, you know, for being left out
  4. **/*.scss <- This is the glob I use the most. It’s an upgraded version of the regular *.scss glob, where it states to search the scss files in the current directory and all sub-directories. This is the one that saves your day.
    • Pros: Having the glob that will look for all file types that are ultimately going to compile to assets in ALL directories and it’s subs is the bread and butter of faster workflow
    • Cons: Careful if you have vendor files. You generally don’t wanna change these and then compile them. (*cough, bootstrap*)

Now that we know of globbing, let’s just quickly expand our sass task from gulpfile.js:

Awesome! Now we can move on and effectively compile all Sass/Scss files in the application/scss directory. Let’s try it out?

I’m gonna add up another file to the scss folder. Let’s call it button.scss, add up random stuff, and let’s run gulp sass command! I’ll open up Atom editor and git bash and take one snapshot to show how it goes:

Sass with multiple files

Awesome! On the left you see that the file is compiled, transpilled, copied into the css folder and all that good stuff we wanted to do.

Enter gulp watch

The general syntax for Gulp watcher is actually surprisingly simple, it’s as plain as:

First parameter in the watch function is which file (or files. #globbingpower) to watch, and then in the next parameter you’ll include an array of tasks to run. Let’s now create a gulp watch task:

Basically, we’re creating a task and letting Gulp know he’s gotta keep an open eye on changes to the application/scss/**/*.scss files. If, in this case, any of the .scss files are changed, run the “sass” task that we already have. Lemme show you how the complete gulpfile.js looks like right now:

Give it a whirl. Type gulp watch in the root experiment directory:

Gulp watch running

All right! We have a file watcher in place! Try changing something in any of the *.scss files we have:

gulp watch executes

Woo-hoo! Congrats are in order, again, you’ve set up your very first file watcher using Gulp! This is quite sufficient to run all of your sass compiling, but we only have one more thing to do here, and that is error handling.

Nobody likes watcher errors, right?

So let’s handle them! First, lemme show you how an error looks like with gulp watcher:

Gulp watch error

Oh snap! Now what? Gulp is helpful enough to let you know what went wrong, but the most annoying thing that actually happened is that our watcher stopped. It just bailed on us… Let’s expand our gulpfile a liiiiiiiitle more to see if we can remedy this, and complete this tut.

First, we gotta tell gulp to watch for errors. Gulp has certain events built in, and they’re handled by adding up .on in the pipe workflow. Example:

Oke. This will tell gulp that on case of error, use the custom function showError that I’m about to spill out for you:

Right! Full gulpfile.js right now:

Let’s run our gulp watcher again, and this time I’ll simulate an error by adding up five exclamation marks (!!!!!) to the end of the code. So gulp watch in the terminal, and now save the file with error:

Gulp watch error handled

And there we go! You’ll notice that the gulp “pipe” didn’t break this time, and watcher didn’t stop! You can examine the error, correct it, write proper scss/css and save, and everything will compile!

that’s all folks…

You now have a functional file watcher that’ll keep an open eye on your files, update your regular CSS files and log any errors it encounter along the way!

Stay tuned, next time we’ll see how to have browser refresh itself on file watch. #magic

Click here to continue with this series