如何在Underscore模板中使用HTML压缩器

Question

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

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

谢谢！

- Armando Pérez Marqués

---

你找到答案了吗？我也有同样的问题，我的JST大小可能会大幅减小。 - Josh W Lewis

@JoshWLewis 抱歉，还没有找到解决方法 :( 看来这种最小化工具必须知道下划线标签并最小化标签外的所有内容。 - Armando Pérez Marqués

Answer 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时没有遇到任何问题。希望这能帮到你。

- Ben

---

谢谢！我会尝试的 :) - Armando Pérez Marqués