1

I am trying to make one css file that is minified, but contains a source map in case I need to debug on production which happens often. This won't work. If I use the below code:

gulp.task('process:css', function () {
return gulp.src([paths.css, paths.less, "!" + paths.minCss])
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(concat(paths.concatCssDestMin))
    .pipe(cleanCss())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("."));

});

The whole process works and everything gets generated, the final min.css is correct and works, but the source map is bonkers, debugging in browser claims all style references come from line 1 or 2 of the first references file source in the source map:

enter image description here

However, if I remove the cssmin() from the process and run it, everything works, including the source maps. The source maps reference the original files despite me concating them all into one.

What am I doing wrong? How can I achieve this?

EDIT: As per vegasje advice, I was using the wrong plugin, however when switching from mincss to cleanCss, I still can't get the single min.css file to map to the original files. It only references the concatted file:

{"version":3,"sources":["wwwroot/css/site.min.css"],"names":[],"mappings":..."

However, once again If I remove the cleanCss() command. The source map looks works and looks correct:

{"version":3,"sources":["bootstrap.custom.css","kendo.custom.css","kendobootstrapfix.css","main.css","yamm.css","theme.less"],"names":[],"mappings":"A....

However, then it is not minified.

SventoryMang
  • 10,275
  • 15
  • 70
  • 113

1 Answers1

2

cssmin does not support gulp-sourcemaps. See the supported list here:

https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support

The plugin you want is gulp-clean-css.

Edit: You may also want to try the pipeline below. It isn't ideal, because it minifies before concat-ing the css, but it may overcome your issues:

gulp.task('process:css', function () {
    return gulp.src([paths.css, paths.less, "!" + paths.minCss])
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(cleanCss())
        .pipe(concat(paths.concatCssDestMin))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("."));
});
vegasje
  • 238
  • 1
  • 7
  • Thank you, this removed the browser not reading the map files, but still then the map file only references the concatted site.min.css file and not the individual files they came from. That seems to be working as intended according to this answer: https://stackoverflow.com/questions/32502678/gulp-uglify-and-sourcemaps/32504135#32504135 but then that isn't helpful for me since I want to store maps to the original files. Not sure if there is another way. Same thing applies of it I remove the cleanCss command, it works correctly. Problems only arise after minifying. – SventoryMang Aug 15 '17 at 22:08
  • Thanks that edit helped! The only small quip is it gives 1 line per file minified in the concatted file. but that doesn't matter to me. – SventoryMang Aug 15 '17 at 22:29