Question

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

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）的产品，则输入源映射可以作为字符串传递。

但我无法理解如何将此字符串传递给任务。它甚至可能吗？我怎么能这样做？

Answer 1

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

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

不要在开发环境中使用cssmin，这样就可以根据需要从css映射到Less文件。
使用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

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

2 个答案: