We will configure an automated task to transform our created SCSS files into CSS. This code can be implemented in any web project (with gulp dependencies preconfigured, of course):

$ npm install gulp-sass --save-dev

gulp-sass is a customized plugin for gulp to work with SASS files.

After importing the npm modules into our project, let's reference them into our gulpfile:

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

Then, we need to create a new task. Let's call it process-styles:

// SCSS processing
gulp.task('process-styles', function() {gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'));});

Note that we use the pipe() method to call any extra plugins between the .src() and the .dest() sections. The code is so self-explanatory, we are just passing the route where the gulp task will find the files to be converted, then configuring a fault behavior if some error is raised and if everything is okay, we just specify the route of our generated files.