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?
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!