以下のように詰め込みます：実行していない、コンカットし、ソースマップでCSSを小さくしますか？

Question

私は縮小された1つのCSSファイルを作成しようとしていますが、頻繁に発生する本番環境でデバッグする必要がある場合に備えて、ソースマップが含まれています。これは動作しません。以下のコードを使用する場合：

gulp.task('process:css', function() { 
return gulp.src([paths.css, paths.less, "!" + paths.minCss]) 
    .pipe(sourcemaps.init()) 
    .pipe(less()) 
    .pipe(concat(paths.concatCssDestMin)) 
    .pipe(cleanCss()) 
    .pipe(sourcemaps.write(".")) 
    .pipe(gulp.dest(".")); 

}）;

すべてのプロセスが動作し、すべての生成が行われますが、最終的なmin.cssは正しく動作しますが、ソースマップはブラウザの主張でデバッグされ、すべてのスタイルの参照は最初の参照ファイルソースの1行目または2行目ソースマップ：私はプロセスから（）cssminを削除し、それを実行した場合

しかし、すべてがソースマップを含め、動作します。ソースマップは、それらをすべて1つに結びつけても元のファイルを参照します。

私は間違っていますか？どうすればこれを達成できますか？

EDIT：cleanCssにmincssから切り替えるとき vegasjeのアドバイスを1として、私はしかし、間違ったプラグインを使用していた、私はまだ独身min.cssファイルを元のファイルにマップすることができません。私はcleanCss（）コマンドを削除すると、再び、しかし

{"version":3,"sources":["wwwroot/css/site.min.css"],"names":[],"mappings":..."

：それだけconcattedファイルを参照します。元の地図の外観が正しいと思われます。

{"version":3,"sources":["bootstrap.custom.css","kendo.custom.css","kendobootstrapfix.css","main.css","yamm.css","theme.less"],"names":[],"mappings":"A.... 

ただし、それは縮小されていません。

Answer 1

cssminはgulp-sourcemapsをサポートしていません。ここでサポート一覧を参照してください。

https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support

したいプラグインがgulp-clean-cssです。

編集：以下のパイプラインを試してみることもできます。それが連結-INGのCSSの前にminifiesので、理想的ではないが、それはあなたの問題を克服することがあります。

gulp.task('process:css', function() { 
    return gulp.src([paths.css, paths.less, "!" + paths.minCss]) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(cleanCss()) 
     .pipe(concat(paths.concatCssDestMin)) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(".")); 
});