2

我的 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 属性下公开源映射，例如 new CleanCSS().minify(source).sourceMap （默认为 false） 如果输入样式是 CSS 预处理器（Less，Sass）的产物，则输入源映射可以作为字符串传递.

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

4

2 回答 2

1

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

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

  • 不要在您的开发环境中使用 cssmin，这样您可以在需要时从 css 映射到您的 Less 文件。
  • 使用没有映射的cssmin进行生产。
于 2015-06-16T21:40:41.080 回答
1

您还可以避免 Grunt cssmin 任务并使用 Less 压缩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

于 2015-06-17T13:43:24.513 回答