Gulp sourcemap with less/concat/autoprefixer/minifycss?

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'));
});