How to not remove some knockout-specific comments using grunt-contrib-htmlmin?

Question

I am trying to use grunt-contrib-html to minify my html. The only problem that I am using knockout with containerless control flow syntax, which is just html comments, but they are really important to knockout:

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

So when I use minifier with the following options:

options: {
   removeComments: true,
   collapseWhitespace: true
}

the application is not working after minification (not surprise, it removes <!-- ko comments ). Removing removeComments solves the problem, but my html has a lot of comments and only few of them are knockout specific. Moreover all knockout comments are easily recognizable: they have <!-- ko in the beginning and <!-- /ko --> in the end.

Looking for underlying html minifier options - there is nothing like "handle correctly knockout comments".

So is there a way to solve my problem: minify html removing comments, but leaving knockout specific comments?

Answer 1

So... this is now implemented via ignoreCustomComments option.

Here's a snippet from our test suite:

var input = '<!-- ko if: someExpressionGoesHere --><li>test</li><!-- /ko -->';

equal(minify(input, {
  removeComments: true,
  // ignore knockout comments
  ignoreCustomComments: [
    /^\s+ko/,
    /\/ko\s+$/
  ]
}), input);