Question

我有一个Chrome应用，我正在通过Chrome Apps＆amp;扩展开发人员工具。在我的src/中，我在bower_components中有各种自定义聚合物元素。其中一个自定义元素（login-card.html）具有以下HTML源代码：

<html>
<head>
<!-- imports -->
</head>
<body>
<polymer-element ...>
<template>
    <div id="area">
        <h2>...</h2>
        <paper-shadow>
           <div ...>
                <form ...>
                    ...
                </form>
                <div ...>
                    <paper-button ...>Back</paper-button>
                    <paper-button ...>Send</paper-button>
                </div>
            </div>
        </paper-shadow>
    </div>
</template>
<script src="login-card.html.0.js"></script>
</polymer-element>

</body>
</html>

当我加载src Chrome应用程序并运行它，然后检查元素时，HTML结构是相同的。完善！然后我在这个src/目录中运行gulp，并获得一个build/目录。我比较了这两个login-card.html文件，它们完全一样。

然后我加载构建Chrome应用并运行它。这就是奇怪发生的地方......

视觉上，该应用程序看起来。

构建：http://i.imgur.com/Q894t5t.png

src（看起来应该是什么样的）：http://i.imgur.com/aCf7hjb.png

然后我通过Inspector查看HTML代码。 src代码匹配原始代码（上面），但构建代码没有。相反，它看起来像这样：

<html>
<head>
<!-- imports -->
</head>
<body>
<polymer-element ...>
<template>
    <div id="area">
        <h2>...</h2>
        <paper-shadow>
           <div ...>
                <form ...>
                    ...
                </form>
            </div>
            <div ...>
                <paper-button ...>Back</paper-button>
                <paper-button ...>Send</paper-button>
            </div>
        </paper-shadow>
    </div>
</template>
<script src="login-card.html.0.js"></script>
</polymer-element>

</body>
</html>

有谁知道为什么或如何发生这种情况？我的HTML代码结构在运行时如何与源代码不同？这有点与gulp有关（虽然我不明白为什么它会在构建中生成相同的HTML）？

运行gulp后，聚合HTML呈现的不同于源代码

0 个答案: