我有一个手柄模板文件,我想缩小。我发现了一些与我在StackOverflow上的问题相关的问题,但没有一个完全像它有答案的问题。我的问题是,当我通过缩小器运行代码时,模板化值中的空格将被删除。
示例:
我的模板文件中有这行代码:
<div>{{{displayName}}} - {{cost}}</div>
当我使用未缩小的文件来呈现页面时,我会得到如下条目:
ProductName - $ 5.50
这就是我想要的。通过html minifier运行模板后,我的模板行现在看起来像这样:
<div>{{{displayName}}}-{{cost}}</div>
并且呈现页面上的条目如下所示:
ProductName- $ 5.50
不是最佳的。现在,我明白我可以通过模板运行并将不间断的空间放入我想要空格的所有地方。尼斯。简单。容易......相对而言。
但是
一个次要的,更大的问题开始发挥作用(以及将所有这些不间断的空间放入我的模板文件以避免此情况下使用html minifier的情况是什么意义当我有选择地将属性或类添加到给定的html元素时,还有更多的问题。
示例:
我的模板文件中也有如下行:
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
在我的模板(把手)变量“paymentSelected”为真的情况下,html显示为:
缩小后,缩小的模板文件包含:
<div class="paymentMethod{{#if amazonAndPaypal}}active{{/if}}">
使页面上的html显示为:
因此,弄乱了我的所有css和javascript,因为现在元素上有一个无法识别的类而不是两个正确的类。
同样,有一种解决方法。我可以将所有类定义放入模板变量中。所以,我的新模板将是:
<div class="{{#if amazonAndPaypal}}paymentMethod active{{else}}paymentMethod{{/if}}">
这种做法违背了删除冗余的想法。所以我不喜欢它。这是一个相当简单的案例,只有两个可能的类。
我确信模板文件的html缩小会有更多的麻烦,但我想我已经表明了我的观点。
现在,所有这些解释都出现在我的问题中:
是否有一个工具可以缩小html但忽略开始和结束模板标签之间的空格?对我来说,这些空间类似于单词之间的空格。我不希望删除句子单词之间的所有空格,只是希望删除模板标签中的空格。
我也去寻找一个通用的sed解决方案,但也没有找到任何方向。
答案 0 :(得分:1)
你可以使用&amp; nbsp;?
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
答案 1 :(得分:0)
好吧,所以我想出了一个更好的选择,对于一些人来说这可能是非常明显的,但我对整个Handlebars演出都很陌生。
缩小html模板的更好解决方案是预编译模板,然后缩小生成的javascript。这样,我也可以节省浏览器端的编译时间(因为我使用Handlebars作为我的模板语言)加载较小的运行时脚本。
当然,这个解决方案没有明确回答我提出的问题,它确实解决了我试图解决的最终问题,即通过尽我所能来尽量减少浏览器上的页面加载时间浏览器下载之前的资产。