kalifa17 kalifa17 - 2 months ago 17
Sass (Sass) Question

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

Answer

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