如何不使用grunt contrib htmlmin删除某些特定于敲除的注释?
我正在尝试使用缩小我的html。我使用knockout的唯一问题是html注释,但它们对knockout非常重要:如何不使用grunt contrib htmlmin删除某些特定于敲除的注释?,html,knockout.js,gruntjs,minify,grunt-contrib-htmlmin,Html,Knockout.js,Gruntjs,Minify,Grunt Contrib Htmlmin,我正在尝试使用缩小我的html。我使用knockout的唯一问题是html注释,但它们对knockout非常重要: <ul> <li>This item always appears</li> <!-- ko if: someExpressionGoesHere --> <li>I want to make this item present/absent dynamically</li>
<ul>
<li>This item always appears</li>
<!-- ko if: someExpressionGoesHere -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
缩小后应用程序无法工作(毫不奇怪,它最终删除了
)
寻找潜在的——没有什么比“正确处理剔除注释”更重要的了
那么,有没有一种方法可以解决我的问题:缩小html删除注释,但保留剔除特定注释?因此……现在可以通过
ignoreCustomComments
选项来实现
下面是我们测试套件中的一个片段:
var input = '<!-- ko if: someExpressionGoesHere --><li>test</li><!-- /ko -->';
equal(minify(input, {
removeComments: true,
// ignore knockout comments
ignoreCustomComments: [
/^\s+ko/,
/\/ko\s+$/
]
}), input);
var输入='测试 ;
相等(缩小)(输入{
removeComments:对,
//忽略淘汰评论
忽略客户评论:[
/^\s+ko/,
/\/ko\s+$/
]
}),输入);
如果出于任何原因,您仍然希望使用无容器控制流,而不在代码中添加注释标记,那么我已经编写了一个绑定处理程序,可以为您这样做
这样应用它:
<div data-bind="wrap: {foreach: arr}" data-bind-inner="text: $data"></div>
如前所述,它适用于单个节点(当然还有其子节点);您不能包装一对同级,但可以将其扩展为使用
同级计数
选项。我恐怕您看不到这里。如果不修改html缩略器或kncockout的源代码,则不支持此选项。因为html缩略器支持忽略带有sysntax的COMMNET:
但这额外的!
是不受支持的KO支持的是,它不会将该评论识别为KO评论。因此,您可能应该在其中一个(或两个)上打开有关此问题的问题项目。谢谢@nemesv我将向他们询问此功能。我知道现在很可能无法实现,但我需要一些击倒专业人士来验证。请随意打开html迷你版-我认为我们可以完全尝试适应此情况。@kangax谢谢,问题已经解决:您可以用此简化正则表达式单个条目:/^\s+\/?ko/
。此外,如果您想在命令行上使用它,您必须对斜杠进行双重转义:html缩略符--file ext html--删除注释--忽略自定义注释\/^\\s+\/?ko\/
。
<div data-bind="wrap: {foreach: arr}" data-bind-inner="text: $data"></div>
ko.bindingHandlers.wrap = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var outerBinding = valueAccessor(),
vNodeOpen = document.createComment('ko'),
vNodeClose = document.createComment('/ko');
element.dataset.bind = element.dataset.bindInner;
// Enclose element in comment nodes
element.parentNode.insertBefore(vNodeClose, element);
element.parentNode.insertBefore(element, vNodeClose);
element.parentNode.insertBefore(vNodeOpen, element);
ko.applyBindingsToNode(vNodeOpen, outerBinding, bindingContext);
}
};