This is my Gulp1 recipe for compiling SASS into CSS, loading a local web server, and refreshing the browser when the SASS files are changed and recompiled. To follow along, you’ll need at least an introductory understanding of Gulp. If you need a basic primer, check out the official documentation or this excellent blog post from Mark Goodyear.
The plugins we’ll need
- gulp-webserver — Runs the local webserver and sets up Tiny LiveReload
- gulp-sass — Compiles SCSS into CSS files
- gulp-plumber — Keeps Gulp watch from dying when one of the tasks has an error
- Node opn — Opens your browser to view the webserver
Installing the plugins
Create your project files
gulpfile.js expects a basic project structure. We have an
gulpfile.js file in our root, a
scss folder for our
styles.scss source file, and a
css folder for our compiled SCSS:
Go ahead and put some actual SCSS into
styles.scss and HTML into
If you’ve done everything right up to this point, you should be able to run
gulp3, and your browser will open to your newly spawned local server. Try changing and saving the
styles.scss and watch the browser reload the stylesheet automatically.
You can download a complete example project from Github.
gulpwithout any options calls the
defaulttask we defined at the end of the gulpfile. ↩