Question

我使用Grunt（grunt-contrib-less）将我的Less文件处理成CSS。这是有效的，但源图不是。

我的Less文件位于/assets/less，Grunt将它们编译为/public/css。

/public/是我在互联网上可公开查看的文件夹。我想有一种方法可以让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
    },
]

Answer 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?

如何将源少文件放在非公用文件夹中并将CSS（其源图）公开？

1 个答案: