javascript - 硫化 polymer 一次性绑定(bind) src 属性

Question

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

在导入文件中我有一些 polymer 元素文件: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 本身解析的，所以它不应该包含任何相对路径——否则它会失败，所以我需要在每次硫化时手动删除它。当它是一个 polymer 元素绑定(bind)属性时，它应该可以工作，比如 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 的配置来解决这个问题？我已经打开an issue在 gitHub 主机页面中。

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]]"
                  }
                ]
            }
        }
    }
});