gulp with less: 运行 less，concat and minify css with sourcemaps？

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

gulp with less: 运行 less，concat and minify css with sourcemaps？

gulp with less: run less, concat and minify css with sourcemaps?

css

gulp

gulp-less

gulp-sourcemaps

gulp-concat