1

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

但是，它并没有被缩小。

4

1 回答 1

2

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("."));
});
于 2017-08-15T21:15:40.513 回答