硫化聚合物一次性绑定 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, it has two attributes 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]]"
                  }
                ]
            }
        }
    }
});

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

Vulcanizing polymer one time bind src attribute

javascript

gruntjs

polymer

polymer-1.0

grunt-string-replace