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

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 文件。我把它缩小了，但我想为缩小的 css 绑定(bind)上一步中的源映射。

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 不允许您链接 sourcemaps。它的 sourceMap 选项只有 true/false，并且会生成一个从缩小的 css 到原始 css 的映射，而不是原始的 Less，抱歉。

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

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