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上使用它没有任何问题。我希望它可以帮助你。

如何使用带有下划线模板的HTML minifier

1 个答案: