The original map is incorrect after combining the CSS provider with LESS and after gulp -minify

Question

I am trying to do the following:

• Combine all CSS files (jQuery plugins)
• Combine media queries
• Collapse CSS
• Create source map

after that i try to do something else in another folder

• Translate LESS
• Combine media queries
• Collapse the resulting CSS
• Create source map
• Autodetect file

It 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 am facing is that the resulting source map is incorrect and always refers to the wrong LESS file.

For this, I use the following libraries:

• gulp -concat
• gulp - Less
• gulp -autoprefixer
• gulp combine harvester media queries
• gulp -sourcemaps
• gulp -minify-CSS

I know that this will work if I refuse the supplier material, but I would like to have only one resulting stylesheet.

Thanks for every tip!

Answer 1

Can you try combining threads before calling the initmap init function?

I have not had the opportunity to test the following code (many of which require lowering), but you might 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)) });