如何让我的源 Less 文件位于非公共文件夹中并让 CSS（它们的源映射）公开？答案

【问题标题】：How can I have my source Less files be in a non-public folder and have CSS (their sourcemaps) be public?如何让我的源 Less 文件位于非公共文件夹中并让 CSS（它们的源映射）公开？
【发布时间】：2014-05-30 03:46:07
【问题描述】：

我正在使用 Grunt (grunt-contrib-less) 将我的 Less 文件处理成 CSS。这是可行的，但源地图不行。

我的 Less 文件在 /assets/less 中，Grunt 将它们编译成 /public/css。

/public/ 是我的文件夹，可在 Internet 上公开查看。我想有一种方法可以让 sourcemaps 工作，即使我的源 Less 文件不在可公开访问的文件夹中。但是我没有找到任何例子。

我的 grunt-contrib-less 配置是：

options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    sourceMap: true,
    sourceMapFilename: "public/css/main.css.map", //Write the source map to a separate file with the given filename.
    sourceMapBasepath: "../assets/less", //Sets the base path for the Less file paths in the source map.
    sourceMapRootpath: "/",//Adds this path onto the Less file paths in the source map.
},
files: [
    {
        expand: true, // Enable dynamic expansion.
        cwd: 'assets/less/', // Src matches are relative to this path.
        src: ['*.less'], // Actual pattern(s) to match.
        dest: 'public/css/', // Destination path prefix.
        ext: '.css', // Dest filepaths will have this extension.
        extDot: 'first'   // Extensions in filenames begin after the first dot
    },
]

【问题讨论】：

标签： css less gruntjs source-maps grunt-contrib-less

【解决方案1】：

我想知道您所说的“不工作”是什么意思。 ~~请注意，源地图不包含原始文件的副本。源映射包含有关您的原始文件的信息，此信息包含文件名 (uri) 和行号，如下所示：~~

Line: 1, column: 436 in generated code maps to: 
{"source":"src/jquery.js","line":1966,"column":26,"name":"jQuery"}

调试工具可以利用这些信息在你的原始源文件中显示你对应的行，当工具无法读取这个文件时这是不可能的。

所以我希望您的源映射是正确的，但对于您的调试工具来说毫无价值。

您应该在配置中添加以下选项：

   options: {
        sourceMap:true,
        outputSourceFiles: true
    }

另请参阅：Does grunt-contrib-less support --source-map-map-inline?

【讨论】：