Use gulp to automate SASS to CSS compilation

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) {
	src("sass/*.scss")

	// Apply sass on the files found
	.pipe(sass())

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

	// Destination for the compiled file(s)
	.pipe(dest("css"));

	done();
}

exports.compile = function (done) {
	watch(
		'sass/**/*.scss', 
		{ 
			ignoreInitial: false
		}, 
		compileSassFiles
	);
}

 

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!