Setting up GULP to compile SCSS in less than 5 minutes

Setting up a comfortable compilation pipeline for your SCSS files can be time-consuming and frustrating 😓. You find a lot of outdated tutorials online with too many details and bloated configurations.

I’m going to show you my simple pipeline. The whole setup will take you less than 5 minutes, I promise! 💪 After following my tutorial, you will be able to compile all your SCSS files to one single CSS file.

Photo by David Clode on Unsplash

1. If you haven’t done already, initialize npm.

npm init

2. Now, install all these dev dependencies:

npm install gulp gulp-sass node-sass gulp-concat --save-dev

3. Create gulpfile.js and add this code snippet:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
   return gulp.src('./sass/**/*.scss')
   .pipe(concat('custom.scss'))
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./dist/'));
});