html grunt-minified angular 表单提交按钮未呈现(节点)
html grunt-minified angular form submit button not rendering (node)
提供源文件时,以下 angular 表单正确呈现,按钮在按下时正确提交(我减小了表单的大小以保持简洁)
<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group">
<label class="control-label col-md-2" for="price">Price:</label>
<div class="col-md-10">
<input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
</fieldset>
</form>
但是在缩小(使用 Grunt 和 Usemin)并提供来自 Dist 文件夹的缩小文件后,表单输入正确呈现,但提交按钮根本不存在。
dist/scripts/script.*******.js 的相关部分显示按钮 html 仍然存在
a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n </fieldset>\r\n \r\n </form>
很明显,Grunt 缩小已将按钮发送到 dist 文件夹,但它只是不呈现,无论是在 chrome 或 firefox 还是从 heroku。
我能指出的唯一奇怪的事情是这些奇怪的空格连同一堆换行符和回车符一起插入到构建文件中 returns。
如果是这个原因,有什么办法呢?另外,为什么 grunt 文件会在按钮周围插入空格?它还在其他几个领域做到了。但无论如何,手动删除空格和换行符似乎并不能解决问题
在另一种非常相似的形式中,按钮在缩小后也不会呈现。缩小脚本文件的那部分也插入了一些空格。应用程序中的所有其他按钮在缩小后可以正常显示和运行
我的编辑是Visual Studio代码
请帮我看看我做错了什么!
我解决了问题
这是其中一个输入字段中的一个小错误。实际上,不是我在上面 post 编辑的那个。
我不小心写了一个 textarea 标签作为自关闭标签,按照旧输入标签的方式
<textarea something something /></textarea>
unminified 这被解释为我想要的,所以当然从未检测到错误
但在缩小过程中它被缩小为
<textarea something something />
它从未正确关闭,因此删除了一些后续块
所以我想我可以概括为:
html解析器可以在缩小之前处理一些错误,但缩小解析器处理错误的方式可能不同,之后可能会出现错误
所以任何奇怪的 post-缩小错误都应该仔细检查 html 以确保正确的标签格式
提供源文件时,以下 angular 表单正确呈现,按钮在按下时正确提交(我减小了表单的大小以保持简洁)
<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group">
<label class="control-label col-md-2" for="price">Price:</label>
<div class="col-md-10">
<input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
</fieldset>
</form>
但是在缩小(使用 Grunt 和 Usemin)并提供来自 Dist 文件夹的缩小文件后,表单输入正确呈现,但提交按钮根本不存在。
dist/scripts/script.*******.js 的相关部分显示按钮 html 仍然存在
a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n </fieldset>\r\n \r\n </form>
很明显,Grunt 缩小已将按钮发送到 dist 文件夹,但它只是不呈现,无论是在 chrome 或 firefox 还是从 heroku。
我能指出的唯一奇怪的事情是这些奇怪的空格连同一堆换行符和回车符一起插入到构建文件中 returns。
如果是这个原因,有什么办法呢?另外,为什么 grunt 文件会在按钮周围插入空格?它还在其他几个领域做到了。但无论如何,手动删除空格和换行符似乎并不能解决问题
在另一种非常相似的形式中,按钮在缩小后也不会呈现。缩小脚本文件的那部分也插入了一些空格。应用程序中的所有其他按钮在缩小后可以正常显示和运行
我的编辑是Visual Studio代码
请帮我看看我做错了什么!
我解决了问题
这是其中一个输入字段中的一个小错误。实际上,不是我在上面 post 编辑的那个。
我不小心写了一个 textarea 标签作为自关闭标签,按照旧输入标签的方式
<textarea something something /></textarea>
unminified 这被解释为我想要的,所以当然从未检测到错误
但在缩小过程中它被缩小为
<textarea something something />
它从未正确关闭,因此删除了一些后续块
所以我想我可以概括为:
html解析器可以在缩小之前处理一些错误,但缩小解析器处理错误的方式可能不同,之后可能会出现错误
所以任何奇怪的 post-缩小错误都应该仔细检查 html 以确保正确的标签格式