javascript - 如何使用带下划线模板的 HTML 缩小器

标签 javascript templates gruntjs minimize underscore.js-templating

我有一些前端代码模板,例如:

<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 的原因.

谢谢!

最佳答案

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

关于javascript - 如何使用带下划线模板的 HTML 缩小器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23746372/

相关文章:

php - 从 Google 获取当前位置,无需将用户送走进行身份验证

javascript - ajax 上传大文件的 file_get_contents 替代方案

c++ - 引用模板参数的用途

c++ - 模板参数、#define 和代码重复

JavaScript(咕噜声): regular expressions for path to a file

javascript - 为什么当我添加 Promise 代码时,这段代码会立即执行?

c++ - 从模板参数类型推导函数模板参数

javascript - Grunt 多次连接 JS 文件

css - grunt concat_css 禁用输出

javascript - 如何在使用 jQuery 时使 Javascript 函数为 "defined"?