gulp with less: 使用 sourcemaps 少运行、连接和缩小 css？答案

【问题标题】：gulp with less: run less, concat and minify css with sourcemaps?gulp with less: 使用 sourcemaps 少运行、连接和缩小 css？
【发布时间】：2017-08-15 20:59:38
【问题描述】：

我正在尝试制作一个缩小的 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....

但是，它并没有被缩小。

【问题讨论】：

标签： css gulp gulp-concat gulp-sourcemaps gulp-less

【解决方案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("."));
});

【讨论】：

谢谢，这删除了浏览器不读取地图文件，但地图文件仍然只引用连接的 site.min.css 文件，而不是它们来自的单个文件。根据这个答案，这似乎按预期工作：stackoverflow.com/questions/32502678/gulp-uglify-and-sourcemaps/… 但这对我没有帮助，因为我想将地图存储到原始文件中。不确定是否有其他方法。同样的事情适用于它我删除了 cleanCss 命令，它可以正常工作。只有缩小后才会出现问题。
感谢编辑帮助！唯一的小妙语是它在连接文件中为每个缩小的文件提供 1 行。但这对我来说并不重要。