Gulp is a toolkit to automate & enhance our workflow. Most of the time, I use gulp for my SASS projects. In this article, I’ll show you how to use gulp to automate SASS to CSS compilation.

First, let’s create a folder named sass and then initialize npm inside the folder.

npm init


Once we’ve our package.json file is ready. We can install the gulp using this command :

npm install --save-dev gulp


Now, we install the other dependencies we’ll use.

npm install sass gulp-sass --save-dev


As we’ve everything installed. It’s time to create gulpfile.js. Then, we’ll add the task compile in the gulpfile.js, which will compile our SASS.

let {gulp, watch, series, src, dest} = require('gulp');
let sass = require('gulp-sass')(require('sass'));

function compileSassFiles(done) {

	// Apply sass on the files found

	// Log errors from the sass
	.on("error", sass.logError)

	// Destination for the compiled file(s)


exports.compile = function (done) {
			ignoreInitial: false


Notice that, the task will watch for changes in any .scss files, including the files inside sub-directories of sass folder.

Now as we’ve our task is ready, we just have to run it in the terminal :

gulp compile


We’re done! Keep the terminal open, and you’re ready to automate SASS to CSS compilation!