javascript - 如何使用带下划线模板的 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 的原因.

谢谢!

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 上使用它没有遇到任何问题。希望对您有所帮助。