gulp with less：运行较少，使用sourcemaps连续缩小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是正确的并且有效，但是源映射是疯狂的，在浏览器声明中调试所有样式引用来自第一个引用文件源的第1行或第2行源地图：

但是，如果我从进程中删除cssmin（）并运行它，一切正常，包括源映射。源映射引用原始文件，尽管我将它们全部合并为一个。

我做错了什么？我怎样才能做到这一点？

编辑：根据vegasje的建议，我使用了错误的插件，但是当从mincss切换到cleanCss时，我仍然无法将单个min.css文件映射到原始文件。它只引用了连接文件：

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

然而，再次如果我删除cleanCss（）命令。源地图看起来有效且看起来正确：

{"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。

编辑：您可能还想尝试下面的管道。它并不理想，因为它在连接css之前会缩小，但它可能会克服你的问题：

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("."));
});