我有一些前端代码模板,例如:
<div class="row">
<div class="my-header col-md-1">
<!-- comments -->
{{ title }}
</div>
<div class="my-container col-md-11">
{% if (content) { %}
{{ content }}
{% } else { %}
<p>Empty</p>
{% } %}
</div>
</div>
我正在使用 grunt-contrib-jst将它们全部存储在一个文件中,然后在另一个构建步骤中将包含在一个 JS 文件中,并将该文件推送到 CDN。这部分工作完美,但我想使用 processContent
缩小 HTML 模板代码的选项,其中包含 Undercore 模板分隔符( <%...%>
替换为 {% ... %}
, <%= ... %>
替换为 {{ ... }}
)。
我想使用 html-minifier但它实际上并没有最小化任何东西,显然是因为它试图将模板解析为纯 HTML(并且由于模板标签而失败)。
是否有任何 Node 包/函数可以让我最小化这种模板?我想在源模板中使用注释和空格,但在生成的构建文件中删除所有不必要的内容。
现在我的 JST 设置中有这个:
processContent: function (content) {
return content
.replace(/^[\x20\t]+/mg, '')
.replace(/[\x20\t]+$/mg, '')
.replace(/^[\r\n]+/, '')
.replace(/[\r\n]*$/, '\n');
},
...
但我想尽量减少一切可能,这就是我尝试使用 html-minifier 的原因.
谢谢!
最佳答案
我真的无法帮助最小化下划线模板分隔符,我仍在尝试自己找出最好的方法,但您可能需要考虑通过 htmlclean 运行您的模板。 .我将它与 r.js 一起使用,它非常适合去除代码中的换行符和空格。用法示例:
var htmlclean = require('htmlclean');
// ...
processContent: function (content) {
return htmlclean(content)
.replace(/^[\x20\t]+/mg, '')
.replace(/[\x20\t]+$/mg, '')
.replace(/^[\r\n]+/, '')
.replace(/[\r\n]*$/, '\n');
},
我在有下划线模板的 HTML 上使用它没有遇到任何问题。希望对您有所帮助。
关于javascript - 如何使用带下划线模板的 HTML 缩小器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23746372/