Gulp-cssmin Preventing Inline Sourcemaps from Working

Question

I have a Gulpfile that uses gulp-cssmin to minify my CSS, and I am also trying to get inline sourcemaps using gulp-sourcemaps (see code below). Without piping anything through Cssmin, my inline sourcemaps totally work. But when I try to pipe everything through Cssmin at the end of my 'sass' task, my inline sourcemaps stop working.

// Compile SASS to CSS, add vendor prefixes, write sourcemaps, then minify

gulp.task('sass', function(){
   return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
   .pipe(sourcemaps.init())
   .pipe(sass().on('error', sass.logError))
   .pipe(autoprefixer(autoprefixerOptions))
   .pipe(sourcemaps.write())
   .pipe(cssmin())
   .pipe(gulp.dest('./_styles'));
});

Anyone have any ideas as to what I'm missing here? Or if I've just got things in the wrong order? Do inline sourcemaps still work with minified CSS? Or is it something specifically with gulp-cssmin?

I couldn't find a previous answer on Stack Overflow that dealt specifically with sourcemaps in relation to gulp-cssmin, so please enlighten!

Thanks.

Jonas Berlin Jonas Berlin · Accepted Answer · 2017-03-07T07:51:18

I'm assuming you are using https://www.npmjs.com/package/gulp-cssmin.

gulp-cssmin uses https://www.npmjs.com/package/clean-css for cleaning the css, and thus the options of clean-css apply. However, since the css delivered to cssmin already contains a source map, it needs to be forwarded to clean-css, but this apparently isn't currently happening:

should pass input source map to minify() as second arg as seen in the second example: https://github.com/jakubpawlowicz/clean-css/blob/master/README.md#how-to-work-with-source-maps
but minify() call here doesn't: https://github.com/chilijung/gulp-cssmin/blob/master/index.js#L42

Therefore it doesn't currently seem to be possible to configure gulp-cssmin to update source maps.

I have added issue https://github.com/chilijung/gulp-cssmin/issues/22 requesting to add the missing functionality.

UPDATE

I found https://www.npmjs.com/package/gulp-clean-css which also uses clean-css behind the scenes AND supports source maps!

You need to update your code to:

var cleanCSS = require('gulp-clean-css');

gulp.task('sass', function(){
   return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
   .pipe(sourcemaps.init())
   .pipe(sass().on('error', sass.logError))
   .pipe(autoprefixer(autoprefixerOptions))
   .pipe(cleanCSS())
   .pipe(sourcemaps.write())
   .pipe(gulp.dest('./_styles'));
});

i.e. move the cleanCSS() before sourcemaps.write().

In general, here is a good list of gulp plugins that support source maps: https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support

Gulp-cssmin Preventing Inline Sourcemaps from Working

1 Answers