Compress Sass and include sourcemaps with gulp?

Question

Is possible to compress sass and include sourcemaps in the result? If I include .pipe(cssnano()) it removes the sourcemaps:

sass: function(sassFilename, basename) {
    return gulp.src(paths.sass + sassFilename)
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(cssnano())
        .pipe(rename({ basename:basename, suffix: '.min' }))
        .pipe(gulp.dest(paths.buildCss));
}

Answer 1

The sourcemaps.init() and sourcemaps.write() calls need to "book-end" all the other .pipe() stages in your stream. Anything that doesn't happen between sourcemaps.init() and sourcemaps.write() will not be recorded in your sourcemaps (or might even remove them as is happening in your case).

That means you need to move your sourcemaps.write() call to the line after rename():

sass: function(sassFilename, basename) {
  return gulp.src(paths.sass + sassFilename)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass().on('error', sass.logError))
    .pipe(cssnano())
    .pipe(rename({ basename:basename, suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.buildCss));
}