Snippet: SASS Source Maps with Gulp

Published on
371 words.Average read time: 2 minutes.

Yesterday I finally took a few moments to implement Source Maps with Gulp for one of our client projects at work. I wanted to use the benefits of Source Maps for quite some time but never actually found the time to wrap my head around it (aka throw in another Gulp plugin). Source Maps are used to connect your pre-compiled files, like Sass, with the later compiled CSS - so inside the Dev Tools you can see for every line of CSS from which Sass file it comes - this is super handy once your project get’s bigger! Anyway, here’s how to implement them with Gulp, Gulp-Sass and Autoprefixer.

First of all, you need to install the different gulp plugins (and gulp, if you haven’t).

$ npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer

After everything is installed we’ll create the basic Gulp setup.

  var gulp = require('gulp'),
      sass = require('gulp-sass'),
      prefix = require('gulp-autoprefixer'),
      maps = require('gulp-sourcemaps');

  var path = {
        scss: './skin/frontend/my-theme/default/scss/',
        css: './skin/frontend/my-theme/default/css/'
      }

Next the tasks will be created, I split them into 2, one for Sass and Source Maps and one for Autoprefixer. It’s important to create the Source Maps before using Autoprefixer, otherwise the line numbers won’t be right. This happen because Autoprefixer adds more properties to your compiled CSS!

gulp.task('sass', function() {
gulp.src( path.scss + 'styles.scss')
  .pipe(maps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
      .pipe(maps.write())
      .pipe(gulp.dest( path.css ))
});

gulp.task('autoprefix', function() {
gulp.src( path.css )
  .pipe(prefix('last 5 versions', '> 1%', 'ie8'))
  .pipe(gulp.dest( path.css ));  
});

First of all source maps need to be initalized, next a compressed css file from the SCSS files is created, the source maps are written and we’re all good! In a second task Autoprefixer takes the compiled, mapped CSS file and prefixes it with whatever needs to be prefixed. The output looks like below (look at the right top of each rule set). Click on each image to view it in full-size.

In case you don’t want your source maps in production you could split everything into 3 taks and run them in the order ["sass", "sourcemaps", "autoprefix"] using gulp.task() and then later have the following production task.

gulp.task('production', ['sass', 'autoprefix'];

// Use the following command to keep out Source Maps.
// $ gulp production