css - 使用 less : run 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() 并运行它，一切正常，包括源映射。源 map 引用了原始文件，尽管我将它们全部合并为一个文件。

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

编辑: 根据 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("."));
});