使用 Grunt 减少 SourceMap 绝对文件路径

Question

我有一个看起来像这样的文件结构（为简洁起见）：

/less/
     /styles.less
/public/
       /css/
           /styles.css
           /styles.css.map
/gruntfile.js

Gruntfile.js：

less: {
    options: {
        sourceMap: true,
        sourceMapFilename: 'public/css/styles.css.map',
        sourceMapURL: 'less/styles.less'
    }
    files: {
        'public/css/styles.css': 'less/styles.less'
    }
}

在html文件中：<link rel="stylesheet" href="/css/styles.css">

现在的问题是，在开发工具中，styles.less 指向 /css/less/styles.less。这显然不对，应该是/less/styles.less。但我似乎可以让它指向项目根目录。

我尝试了sourceMapBasepath 和sourceMapRootpath 选项，但没有任何运气。

想法？

另一件事在我的 css 文件 (/css/styles.css) 中，我明白了：

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjp... */

为什么是 base64 输出？我认为它应该只指向styles.css.map 文件。

Answer 1

使用 grunt-contribe-less 1.0.0

以下任务

less: {
    options: {
      sourceMap: true,
      sourceMapRootpath: '/'

    },
    files: {'css/t.css' : 'less/t.less'}
  }

}

生成一个css/t.css 和一个css/t.css.map。最后一个文件会自动生成，无需设置sourceMapFilename。

以上内容不会生成内联源映射（带有 base64 输出）。

css/t.css 以：

结尾

/*# sourceMappingURL=css/t.css.map */

这可能取决于您的 grunt-contrib-less 版本，另请参阅 Does grunt-contrib-less support --source-map-map-inline?（它描述了您所描述的内联源映射）

阅读：https://github.com/gruntjs/grunt-contrib-less

将sourceMapBasepath 设置为/。

为什么是 base64 输出？我认为它应该只是指向 styles.css.map 文件。

--

源地图文件名

类型：字符串默认值：无

将源映射写入具有给定文件名的单独文件。