使用 cssmin 保留 LESS 源映射用于缩小的 css

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 绑定上一步的源映射。

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 文档中看到以下内容：

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

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

Answer 1

grunt-contrib-cssmin不允许

链接源映射。它的 sourceMap 选项只有真/假，并且会生成一个从缩小的 css 到原始 css 的映射，而不是到原始的 Less，对不起。

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

• 不要在开发环境中使用 CSSMIN，这样您就可以在需要时从 CSS 映射到较少的文件。
• 在生产中使用 CSSMIN，而不进行映射。

Answer 2

您还可以避免 Grunt cssmin 任务并使用 compress 减少压缩选项。

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