how do I get sass to generate CSS sourcemaps when using gulp?

Question

I've started experimenting with gulp.js.

I'm used to grunt sass packages generating CSS sourcemaps that I can use to debug my sass. I'm currently using gulp-ruby-sass to generate CSS.

At the end of the process no source maps are being generated and there is no sourcemap reference in the CSS file.

My gulpfile looks like this:

/* load plugins */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browsersync  = require('browser-sync'),
    reload = browsersync.reload;


/*
*  define tasks
*/

gulp.task('sass', function() {
    return sass('assets/sass/main.sass', { sourcemap : true })
    .pipe(gulp.dest('assets/css'))
    .pipe(reload({stream : true})) ;
}) ;


/*
*  browsersync conf
*/

gulp.task('browser-sync', function() {
    browsersync({
    proxy: 'neat',
    port: '3000'
    });
});

gulp.task('browsersync-reload', function () {
    browsersync.reload();
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('assets/sass/**/*', ['sass']);
});


/* Default task */
gulp.task('default', ['sass'], function() {
    gulp.watch("assets/sass/**.*", ['sass']);
});

Answer 1

There have been breaking changes with gulp-ruby-sass 1.0, and it has a rather weird behaviour now (although the definitely have some reason for that ... just don't know which one ;-))

But it seems that you not only have to tell Sass that you're using sourcemaps, but also have to use Gulps sourcemap plugin to achieve this. I guess the change has been made to someday integrate better with Gulp 4. Anyhow, here's an article I wrote on that topic: http://fettblog.eu/blog/2014/04/10/gulp-sass-autoprefixer-sourcemaps/

And here's the Gist:

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

gulp.task('default', function () {
    return sass('app.scss', {sourcemap: true, style: 'compact'})
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
});