Modern front-end development has become increasingly complex over the years, especially with the rise of the single-page webapp and an abundance of javascript frameworks based on Node.js. Fortunately, the tooling has also become more sophisticated.

It is hard to fathom the construction of my first real website - manually optimizing images, writing CSS by hand, trying to account for the frustrations of conditional support for every different version of Internet Explorer. Things have changed.

Now there is a library for everything. We have pre-classed front-ends like Twitter Bootstrap and the like, pre-processing and post-processing for CSS through SASS/SCSS, all sorts of asset compilers and task runners, polyfills and babel. Javascript, once reviled by developers, has become the go-to for silicon-hued self-starters. It’s easy to get lost in it all, especially when you just want to make a simple static website. This is where Gulp comes in.

Gulp is a task runner. It’s true power is exercised when coupled with plugins. This allows you to automate some of the small stuff while you are working, like compiling SASS on the fly, which is what I am going to show you here. While Gulp is being displaced somewhat by Webpack and the like, I still find it handy for simple projects. For example, if I want to throw together a one-off website for a demo, I don’t want to write it in React and configure Webpack, I just want to get to the end result as easily as possible.

It is incredibly simple to get started. From your project folder:

npm install gulp-cli -g
npm install gulp node-sass gulp-sass -D
touch gulpfile.js

This is what my project folder looks like:

|   index.html
|   gulpfile.js
|       main.scss

This is what I put in my gulpfile:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))

gulp.task('sass:watch', function () {'./sass/*.scss', ['sass']);

Now, anything I write into “main.scss” (gulp.src) will compile into “main.css” (gulp.dest) by passing gulp the argument “sass”, like so:

gulp sass
[11:46:12] Using gulpfile ~/project/gulpfile.js
[11:46:12] Starting 'sass'...
[11:46:12] Finished 'sass' after 17 ms

I can also use the “gulp sass:watch” command to continuously update the “main.css” file when there are any changes to my “.scss” files.

Here I’ve provided the simplest example possible with the node-sass and gulp-sass plugins but there is an abundance of plugins for whatever you may need. Check them out here.

Good luck and happy coding!