Compile SASS using Gulp

Posted 20 July 2016


For a basic introduction to Gulp see my earlier blog post. The following example uses the npm package gulp-sass.

gulpfile.js

'use strict';

/**
 * Gulp tasks to compile SASS
 * - sass = compile sass file in /sass/style.scss => /css/
 * - sass:watch = wait for changes in /sass/ then run 'sass' task
 */

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

gulp.task('sass', () => {
  return gulp
    .src('./src/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./src/css'));
});

gulp.task('sass:watch', () => {
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

Thanks for reading

I'm Alex O'Callaghan and this is my personal website where I write about software development and do my best to learn in public. I currently work at Mintel as a Principal Engineer working primarily with React, TypeScript & Python.

I've been leading one of our platform teams maintaining a collection of shared libraries, services and a micro-frontend architecture.

I'm from London and you can find me on a few different social media platforms: