如何使用带有下划线模板的 HTML 缩小器答案

【问题标题】：How to use an HTML minifier with underscore templates如何使用带有下划线模板的 HTML 缩小器
【发布时间】：2014-07-07 22:08:25
【问题描述】：

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

<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 包/功能可以让我最小化这种模板？我想在源模板中使用 cmets 和空格，但在生成的构建文件中删除所有不必要的内容。

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

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

但我想尽可能减少一切，这就是我尝试使用html-minifier 的原因。

谢谢！

【问题讨论】：

你找到答案了吗？我有同样的问题，我的 JST 大小可能会显着减小。
@JoshWLewis 抱歉，还没有运气:( 显然这种最小化器必须注意下划线标签并最小化这些标签之外的所有内容。

标签： javascript templates gruntjs minimize underscore.js-templating

【解决方案1】：

我无法真正帮助最小化下划线模板分隔符，我自己仍在尝试找出最好的方法，但您可能需要考虑通过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 上使用它没有任何问题。希望对你有帮助。

【讨论】：

谢谢！我试试看：）