CODEWITHSUNDEEP
javascriptsassgulpgulp-sassgulp-sourcemaps
kalifa17
kalifa17

Reputation: 137

Compress Sass and include sourcemaps with gulp?

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));
}

Upvotes: 0

Views: 104

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30564

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));
}

Upvotes: 1

Related Questions