硫化聚合物一次性绑定src属性

Question

我正在使用导入文件中的grunt-vulcanize，该文件具有到新位置的 vulcanized.html 的相对路径。当文件准备好时，它已将相对路径更改为新位置。这对于作为图像或文件的静态文件非常有用，但是...

在导入文件中，我有一些聚合物元素文件：例如paper-fab.html。我的导入文件有如下引用：

<link rel="import" href="../myPolymerElementsFolder/paper-fab/paper-fab.html">

正如你在line 113 of the imported file中看到的，它有两个属性resolved by one-time-binding using brackets：

<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

src 属性出现问题。硫化将其解释为路径，因此它添加了新的相对路径，解析如下：

<iron-icon id="icon" src="../myPolymerElementsFolder/paper-fab/[[src]]" icon="[[icon]]"></iron-icon>

但是该属性是由 polymerElement 本身解析的，因此它不应该包含任何相对路径 - 否则它会失败，所以我需要在每次硫化时手动删除它。当它是聚合物元素绑定属性时，它应该可以工作，例如 icon 属性。像这样解决：

<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

我知道 src 属性是需要替换相对路径的特殊情况，但不是在这种特殊情况下。

我尝试了以下配置但没有成功：

grunt.initConfig({
    //(...)
    vulcanize: {
        default: {
            options: {
                excludes: ["finalFolder/_Imports.html"]
            },
            files: {
                "finalFolder/Vulcanized.html": "finalFolder/_Imports.html"
            }
        }
    },
});

您知道是否可以通过修改grunt-vulcanize 的配置来解决此问题？ 我已经在 gitHub 主机页面中打开了an issue。

Answer 1

可以使用grunt-string-replace plugin 并向 grunt 文件添加新任务：

grunt.initConfig({
    //(...)
    'string-replace': {
        inline: {
            files: {
                'finalFolder/Vulcanized.html': 'finalFolder/Vulcanized.html',
            },
            options: {
                replacements: [
                  // place files inline example 
                  {
                      pattern: /[.]{2}\/Scripts\/bower\/.*\/\[\[src\]\]/g,
                      replacement: "[[src]]"
                  }
                ]
            }
        }
    }
});