如何使用HTML缩小器和下划线模板 [英] How to use an HTML minifier with underscore templates

问题描述

我的前端代码有一些模板，例如：

 < div class =row> 
< div class =my-header col-md-1> 
<！ - 评论 - > 
 {{title}} 
< / div> 
< div class =my-container col-md-11> 
 {％if（content）{％} 
 {{content}} 
 {％} else {％} 
< p>空< / p> 
 {％}％} 
< / div> 
< / div> 
  

我正在使用 grunt-contrib-jst 将它们全部存储在单个文件中，然后在另一个生成步骤中将包含在单个JS文件中，并将该文件推送到CDN。这部分工作正常，但我想使用 processContent 选项缩小HTML模板代码，其中包含Undercore模板分隔符（<％。 ..％> 替换为 {％...％} ，<％= ...％> ; 替换为 {{...}} ）。

使用 html-minifier ，但它实际上并没有最小化任何东西，显然是因为它试图将模板解析为HTML-只有（并且因模板标签而失败）。

是否有任何Node包/函数允许我最小化这种模板？我希望在源代码模板中使用注释和空白，但是在生成的构建文件中不需要任何东西。

现在我的JST设置中有这个：

$ b $

  processContent：function（content）{
返回内容
 .replace（/ ^ [\x20\t] + / mg，''）
 .replace（/ [\x20\t] + $ / mg，''）
 .replace（/ ^ [\r\\\
] + / ，''）
 .replace（/ [\r\\\
] * $ /，'\\\
'）; 
}，
 ... 
  

但是我想尽量减少一切可能，这就是为什么我尝试使用 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\\\
] + / ，''）
 .replace（/ [\r\\\
] * $ /，'\\\
'）; 
}，
  

我在使用下划线模板的HTML时没有问题在那里。我希望它能帮助你。

I have some templates for my frontend code, like:

<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>

And I'm using grunt-contrib-jst to store them all in a single file and then on another build step will be included in a single JS file and that file is pushed to the CDN. This part is working perfectly, but I want to use the processContent option to minify the HTML template code, which contains Undercore template delimiters (<%...%> replaced with {% ... %}, <%= ... %> replaced with {{ ... }}).

I wanted to use html-minifier but it doesn't actually minimize anything, apparently because it tries to parse the template as HTML-only (and fails because of the templating tags).

Is there any Node package / function that allows me to minimize this kind of templates? I would like to use comments and whitespace in source templates but strip everything unnecessary on the resulting build file.

Right now I have this on my JST settings:

processContent: function (content) {
    return content
        .replace(/^[\x20\t]+/mg, '')
        .replace(/[\x20\t]+$/mg, '')
        .replace(/^[\r\n]+/, '')
        .replace(/[\r\n]*$/, '\n');
},
...

But I want to minimize everything possible, that's why I tried with html-minifier.

Thanks!

解决方案

I can't really help with minimising the underscore template delimiters, still trying to find out the best way to do that myself, but you might want to consider running your templates through htmlclean. I use it with r.js and it works really well for stripping out newlines and spaces in the code. Example usage:

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');
},

I've had no problems with using this on HTML that has underscore templates in there. I hope it helps you.

这篇关于如何使用HTML缩小器和下划线模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！