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!