Gulp sourcemap with less/concat/autoprefixer/minifycss? - less

Question

Is it possible to generate a sourcemap with all these transformations?
gulp.task('styles', function() {
return gulp.src(source.styles)
.pipe(plumber())
.pipe(gulpif(/\.less$/, plumber().pipe(less({
strictMath: true,
strictUnits: true,
}))))
.pipe(concat('bundle.css'))
.pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false}))
.pipe(minifyCss())
.pipe(gulp.dest('public/css'));
});
Libraries used:
gulp-less
gulp-if
gulp-concat
gulp-autoprefixer
gulp-minify-css
I know less can generate sourcemaps, gulp-concat I don't think supports them, autoprefixer is supposed to preserve them, and minify-css/clean-css don't seem to make any mention of source maps. Am I out of luck?

Answer 1

I've been having the same issue tonight, and I'm still working on finding out a clean solution. However, I just managed to get something working so I thought I would share:
Note: I'm using neither gulpif nor minify
Use gulp-sourcemaps since gulp-less seems to come without the source map option (at least for the moment).
Replace gulp-concat by gulp-concat-sourcemap to preserve the sourcemaps.
Gulp-concat isn't currently supported by gulp-sourcemaps (cf. README).
Until that gets fixed there's a patched version to grab here: https://github.com/floridoo/gulp-concat/tree/sourcemap_pipe2
gulp.task('less', function () {
gulp.src(sources.less)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(prefix({ map: true }))
.pipe(concat('build.css'))
.pipe(sourcemaps.write()
.pipe(gulp.dest(dirs.build + 'assets/css'));
});

Answer 2

Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.
Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps
So you should be able to use:
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss]
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/css'));
The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps
Alternatively you could consider to use the Pleeease plugin Pleeease can run many postprocessors once, see http://pleeease.io/docs/#features