Search code examples
gulpgulp-lessgulp-sourcemaps

gulp-sourcemaps not including content when using gulp-less and gulp-minify-css


I have a Gulp taks like this:

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
    return gulp.src('./less/*.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./assets/css'));
});

The .css file is created as well as the source map file. However the source map doesn't have the content ("sourcesContent": [null,null,...,null]), which should be the case as the sourcemaps plugin says by default it will include the content (I also tried explicitly setting includeContent to true).

When I remove the minify step it works well and I can see the content of the original less files, so I checked if minify-css supports sourcemaps and according to the plugins list it should.

Am I doing something wrong? Is there any known incompatibility between less and minify-css when generating sourcemaps?


Solution

  • Sourecemaps are pretty young in minifyCSS, and subsequentyl gulp-minify-css and seem to be still buggy to some extend. I haven't found this particular case in the bug tracker, but stumbled upon similar issues when using Sass.

    I found a workaround using a similar plugin based on PostCSS. It's not as elegant as the other, but still better than including the CSSClean plugin in LESS ;-)

    var less = require('gulp-less');
    var sourcemaps = require('gulp-sourcemaps');
    var postcss = require('gulp-postcss');
    var csswring = require('csswring');
    
    gulp.task('less', function() {
        return gulp.src('./bower_components/bootstrap/less/bootstrap.less')
            .pipe(sourcemaps.init())
            .pipe(less())
            .pipe(postcss([csswring]))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./assets/css'));
    });
    

    alternatively, you could call minifyCSS only for production mode, Sourcemaps only for DEV mode, if your setup allows for it.

    I hope this helps!