A basic SCSS compilation gulpfile.js
By Mike Street
This post is not about setting up gulp for the first time - as there are plenty of good blog posts out there explaining that. Instead, this is about getting gulp to compile sass successfully
If you haven't set up gulp, or don't know how, I have compiled a short list of excellent articles at the bottom of the post.
Why would you use gulp to compile sass?
I have only recently required gulp to compile my sass. Before now I was using the built in sass watcher - which served every need. That was, until, I included bootstrap-sass and suddenly my Sass was taking > 5 seconds to compile, which when you are developing is a hell of a long time!
Gulp does some magic and, depending on the file you edit, can take less than a millisecond to compile the css - which is faster than I can press
alt + tab and then
ctrl + r.
To get to the basic gulpfile, however, was painful. Many of the blog posts are out of date and I struggled to get to where I am (it might just be me though...)
For the below code, I am assuming you understand the basics of gulp and have set it up.
Although the gulpfile below is only for sass compiling, there are a few things put in place for scaling up to handle more functionality for the future.
The gulpfile and associated package.json can be found as a github gist - feel free to comment/fork. I will keep this simple but updated where necessary.
An introduction to gulp: