咕噜咕噜的 htmlmin clean-css 破坏了标签中的<style></style>车把代码

Question

在Gruntfile.js的htmlmin部分中，我将minifyCSS设置为true，如下所示：

htmlmin: {
    dist: {
        options: {
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true
...

但不幸的是，它现在正在破坏我的一些Handlebars代码，变成这样：

<style type="text/css">
{{#each list}}
  .aClassWithBgImage{{@index}}{background-image:url({{images.thumbnailBoxImage}})}
{{/each}}
</style>

进入这个：

<style type="text/css">{background-image:url({{images.thumbnailBoxImage}})}</style>

我真正想要（期待）的是：

<style type="text/css">{{#each list}}.aClassWithBgImage{{@index}}{background-image:url({{images.thumbnailBoxImage}})}{{/each}}</style>

有什么快速解决办法吗？否则，我确信我可以以不同的方式重新构建我的代码

Answer 1

在这个答案的帮助下，我发现html minifier文档中有一个ignoreCustomFragments选项。使用它，您可以告诉htmlmin跳过压缩{{}}标签的尝试，在Gruntfile.js:中使用这样的代码

htmlmin: {
    ...
        options: {
            ignoreCustomFragments: [/<%[sS]*?%>/, /<?[sS]*??>/, /{{[sS]*?}}/], //last item in array is the one for Handlebars. The previous 2 items are the default code tags to be ignored, listed in the documentation
            ...

因此，关键部分是添加/{{[sS]*?}}/ RegEx。（当然，如果你愿意，你可以用一个RegEx替换整个ignoreCustomFragments数组。）注意：你可能想转义RegEx中的大括号"｛｝"，但如果没有它，它似乎可以正常工作。

更新

所以实际上，/{{[sS]*?}}/RegEx似乎在我的代码中留下了一个空格"。。。如果我把它改为/{{.*}}/，空格会被删除，但我的一些CSS样式会被压缩。。。所以现在，我认为这两个RegExs在某种程度上是一个"半解决方案"。我还尝试过使用Wiki中列出的customAttrSurround，但我甚至无法在Gruntfile.js.