cssgulpgulp-concatgulp-sourcemapsgulp-less

gulp with less: run less, concat and minify css with sourcemaps?


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.


Solution

  • 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("."));
    });