gulp-clean-css，gulp-ruby-sass和gulp-sourcemaps之间不兼容

Question

I have this task defined in my gulpfile.js:

var sass     = require('gulp-ruby-sass');
var cleanCss = require('gulp-clean-css');
var srcmaps  = require('gulp-sourcemaps');

gulp.task('css',function(){
    return  sass('css/**/*.scss',{sourcemap: true})
            .on('error',sass.logError)
            .pipe(srcmaps.write())
            .pipe(cleanCss())
            .pipe(gulp.dest('css'));
});

The final output it's right, except for the fact that the source map generated doesn't seem to work (tested in firefox, the inspector always points to line 1, since the css is minified).

I tried adding pipe(srcmaps.init()) before pipe(cleanCss) but it didn't work either. Removing the cleanCss line solved the problem (The source map worked fine), but the css won't get minified.

What am I missing?

Update: The cleanCss debug output is the following:

liquidacion.css: 7797
liquidacion.css: 1200
baja_cajas.css: 9918
baja_cajas.css: 2071
caja.css: 13160
caja.css: 2605
main.css: 11935
main.css: 2394
posiciones.css: 12905
posiciones.css: 2625
solicitud.css: 16182
solicitud.css: 3305
traslados.css: 12047
traslados.css: 2646
empleo.css: 19207
empleo.css: 3816
ingresos.css: 13832
ingresos.css: 2985
rq_personal.css: 17155
rq_personal.css: 3882

I already tried adding srcmaps.init() before cleanCss (and after sass), but it didn't work either.

Answer 1

gulp-sourcemaps only records transformations to your CSS up until srcmaps.write() . Once srcmaps.write() is called the source maps are written to the stream and any subsequent transformations will not be reflected in your source maps.

That means you need to run cleanCss() before srcmaps.write() if you want the minification to be reflected in your source maps:

gulp.task('css',function(){
  return  sass('css/**/*.scss',{sourcemap: true})
        .on('error',sass.logError)
        .pipe(cleanCss())
        .pipe(srcmaps.write())
        .pipe(gulp.dest('css'));
});

Answer 2

因此，我最终以gulp-sass代替gulp-ruby-sass，一切都按预期进行。