How to detect changes in all scss files with gulp

#javascript #gulp #webdev

This is a tip for easily detect changes in all ‘.scss’ files with gulp. Some people are confused about it, but, it’s a logical question, pretty easy, and i will show how to do it step by step.

First off all

Write some gulp tasks:

Where the magic happens

You must to have one main .scss file and how many partial files you want. Partial files are .scss files named with an underscore prefix, with smaller css parts that will be ignorated and will not generate a new css file but will be imported in the main .scss file.

So, don’t put the underscore prefix in the partial files until you end your job. Yep, that’s right. Gulp will not ignore the files without the underscore prefix, cause for now they are treated as normal style files, and then Gulp will watch every file.

Of course, when you end your job, you will have to delete every generated css file from the partial files, put the underscore prefix in each partial file name and in their references. Depending of your project size, you don’t have to spend more than ten or fifteen minutes to do it. But, if you want, you can automate it, ’cause everything can be automated in JavaScript.

Hope this helps.
See you next time!