吞吐少：運行少，concat和縮小與源代碼的CSS？

Question

我想做一個縮小的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是正確的並且工作正常，但源圖是bonkers，在瀏覽器中調試聲明所有樣式引用來自第一個引用文件的第1行或第2行源地圖：

但是，如果我從進程中刪除cssmin（），然後運行它，一切正常，包括源地圖。源映射引用原始文件，儘管我將它們全部合併成一個。

我在做什麼錯？我怎樣才能做到這一點？

編輯：按照vegasje的建議，我使用了錯誤的插件，但是當從mincss切換到cleanCss時，我仍然無法將單個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。

編輯：您可能還想嘗試下面的管道。這是不理想的，因爲它CONCAT-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(".")); 
});