Sourcemap wrong after combining vendor CSS with LESS and after gulp-minify

Question

I'm trying to do the following:

1. Combine all CSS files (jQuery plugins)
2. Combine media queries
3. Minify CSS
4. Write sourcemap

after that I try to do something else in a different folder

1. Translate LESS
2. Combine media queries
3. Minify resulting CSS
4. Write sourcemap
5. Autoprefix stuff

That looks like this:

gulp.task('styles', function() {
  var streamCSS = gulp.src(sources.css)
    .pipe(sourcemaps.init())
    .pipe(concat('vendor.css'))
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write());

  var streamLESS = gulp.src(sources.less)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .on('error', swallowError)
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write())
    .pipe(prefix("last 2 versions", "> 1%", "ios >= 6", { map: true }))
    .on('error', swallowError);

  return es.merge(streamCSS, streamLESS)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(concat('main.css'))
    .pipe(gulp.dest(destinations.css))
    .pipe(connect.reload());
});

The only Problem I have is that the resulting sourcemap is wrong and refering always to a wrong LESS file.

I use the following libraries to achieve this:

• gulp-concat
• gulp-less
• gulp-autoprefixer
• gulp-combine-media-queries
• gulp-sourcemaps
• gulp-minify-css

I know it would work if I leave out the vendor stuff, but I would like to have only one resulting stylesheet.

Thanks for every advice!

Braid

Answer 1

Can you try to combine the streams before calling the sourcemap init function?

I haven't had a chance to test the following code (with many require omitted) but you can have an idea:

var filter = require('gulp-filter');

var lessFilter = filter('**/*.less');

gulp.task('styles', function() {
    return gulp.src([sources.css, sources.less])
        .pipe(sourcemaps.init())
        .pipe(lessFilter)
        .pipe(less())
        .pipe(filter.restore())
        .pipe(minify({ keepSpecialComments: '*' }))
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(destinations.css))
});

Valor