gulp-sourcemap not working after using clean css.

[jayraj]

Hello there,

I've been trying for to minify css using gulp-clean-css with sourcemap but it's not working. Line numbers are wrong while I'm trying to debug in chrome developers tool but If I skip the cleancss() part, it's working as expected. Is this issue of gulp-clean css? or what? below is my gulp file.

Thanks

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps= require("gulp-sourcemaps");
var cleancss = require('gulp-clean-css');

gulp.task('bundle:less', function() {
console.log(less);
return gulp.src('themes/'+theme+'/css/style.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(cleancss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('www/themes/'+theme+'/css'));
});

gulp.task("default",['bundle:less']);

[scniro]

I don't believe you can use the api's together this way and expect the correct results. Try the following...

return gulp.src('themes/'+theme+'/css/style.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(cleancss())
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('www/themes/'+theme+'/css'));
});

You need to call sourcemaps twice with the loadMaps because we're using two plugins. I'd poke around on stackoverflow or other issues - you'll see this is a common wall people hit at times.

Here is one issue that you could peek at How to use in combination with gulp-sass

[jayraj]

Thank you scniro for your reply. but I'd already tried and unfortunately this is not working

[scniro]

Sorry, I don't have enough info here to determine one way or another if your difficulties can be traced back to gulp-clean-css.

If you create a sample repo which clearly reproduces this issue and you tell me your expected results - I'll happily clone it and investigate.