css - 使用 cssmin 为缩小的 css 保留较少的 sourceMap

Question

我的 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 文件。我将其缩小，但我想将上一步中的源映射绑定(bind)到缩小的 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 - exposes source map under sourceMap property, e.g. new CleanCSS().minify(source).sourceMap (default is false) If input styles are a product of CSS preprocessor (Less, Sass) an input source map can be passed as a string.

但我不明白如何将此字符串传递给任务。有可能吗？我怎样才能做到这一点？

Answer 1

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

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

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