使用 cssmin 为缩小的 css 保留 LESS sourceMaps答案

【问题标题】：Keeping LESS sourceMaps for minified css with cssmin使用 cssmin 为缩小的 css 保留 LESS sourceMaps
【发布时间】：2015-06-16 15:10:39
【问题描述】：

我的 LESS 文件是用 grunt-contrib-less 和相应的 grunt 任务编译的，配置如下：

module.exports = {

    options: {
        sourceMap: true,
        sourceMapFilename: 'Content/styles/e-life.css.map'
    },
    compile: {
        files: {
            'Content/styles/e-life.css' : 'Content/styles/common.less'
        }
    }

}

然后我使用 cssmin 处理输出 css 文件。我把它缩小了，但我想为缩小的 css 绑定上一步中的源映射。

module.exports = {

    options: {
        sourceMap: 'Content/styles/e-life.css.map'
    },
    all: {
        files: {
            'Content/styles/e-life.css': ['Content/styles/e-life.css']
        }
    }

}

如果我在 options.sourceMap 中提及源映射路径，任务将失败。我在css-clean docs 看到以下内容：

sourceMap - 在 sourceMap 属性下公开源映射，例如new CleanCSS().minify(source).sourceMap (默认为 false) 如果输入样式是 CSS 预处理器 (Less, Sass) 的产物，则输入源映射可以作为字符串传递。

但我不明白如何将此字符串传递给任务。甚至可能吗？我该怎么做？

【问题讨论】：

标签： css gruntjs less source-maps grunt-contrib-cssmin

【解决方案1】：

grunt-contrib-cssmin 不允许您链接源映射。它的 sourceMap 选项仅是 true/false，并且会生成从缩小的 css 到原始 css 的映射，而不是原始的 Less，抱歉。

考虑到源映射主要用于调试，我建议：

不要在您的开发环境中使用 cssmin，这样您可以在需要时从 css 映射到您的 Less 文件。
使用 cssmin 无映射进行生产。

【讨论】：

非常感谢！我决定选择第二个选项并将 cssmin 仅用于生产构建。

【解决方案2】：

您也可以避免使用 Grunt cssmin 任务并使用带有 compress 选项的 Less 压缩。

module.exports = {

    options: {
        compress: true,
        sourceMap: true,
        sourceMapFilename: 'Content/styles/e-life.css.map'
    },
    compile: {
        files: {
            'Content/styles/e-life.css' : 'Content/styles/common.less'
        }
    }
}

https://github.com/gruntjs/grunt-contrib-less#compress

【讨论】：