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

Question

我在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(cleanCss)之前添加pipe(srcmaps.init()) ，但是它也不起作用。 刪除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（），但是它也不起作用。

Answer 1

gulp-sourcemaps只會記錄到CSS的轉換，直到srcmaps.write()為止。 調用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'));
});

Answer 2

因此，我最終以gulp-sass代替gulp-ruby-sass，一切都按預期進行。