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

Question

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?

score 0 · Accepted Answer · answered Apr 28 '15 at 19:08

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!

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

1 Answers1