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

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

最终输出是正确的，除了生成的源映射似乎不起作用的事实（在firefox中测试，检查器始终指向第1行，因为css最小化）。

我尝试在pipe(srcmaps.init())之前添加pipe(cleanCss)，但也没有用。
删除cleanCss行解决了该问题（源映射工作正常），但不会缩小CSS。

我想念什么？

更新：cleanCss调试输出如下：

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

我已经尝试在cleanCss之前（和sass之后）添加srcmaps.init（），但是它也不起作用。

最佳答案

gulp-sourcemaps仅记录到srcmaps.write()之前对CSS的转换。调用srcmaps.write()后，会将源映射写入流，并且任何后续转换都不会反映在源映射中。

这意味着如果您希望缩小内容反映在源地图中，则需要在cleanCss()之前运行srcmaps.write()：

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

关于javascript - gulp-clean-css，gulp-ruby-sass和gulp-sourcemaps之间不兼容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37954053/