Grunt-contrib-htmlmin how to ignore template tags

Question

I use grunt-contrib-htmlmin to minimize my html in the backbone / underscorejs project, however when I run grunt-contrib-htmlmin for any underscorejs template that has <% = myvar%>, the task outputs a parsing error. Is there a way grunt-contrib-htmlmin to ignore the text inside <% = and%>?

Answer 1

Since you posted this problem, a new function has been added to the html-minifier (which is used by grunt-contrib-htmlmin ) to ignore the interpolation tags that cause the problem.

For example, the following html partial:

 <div> <span><%= variable %></span> </div> 

Now will decrease to:

 <div><span><%= variable %></span></div> 

Before the changes, this would lead to an error.

You can try this using the demo on the website to check it out. If this works, you can upgrade your project to use the new version.

Answer 2

This issue is outdated, but grunt-contrib-htmlmin and html-minifier can take new parameters.

As @mckramer already mentioned, grunt-contrib-htmlmin is on top of html-minifier , so you can add additional parameters :

customAttrAssign:<value>

Regular Expression Arrays That Support Custom Attribute Expressions

customAttrSurround:<value>

Regular Expression Arrays That Support Custom Volumetric Attributes

Decision

Grunt example (for double brackets {{ }} ):

 var hbAttrWrapOpen = /\{\{(#|\^)[^}]+\}\}/; var hbAttrWrapClose = /\{\{\/[^}]+\}\}/; var hbAttrWrapPair = [hbAttrWrapOpen, hbAttrWrapClose]; htmlmin: { blabla: { options: { ... customAttrSurround: [hbAttrWrapPair] }, files: [ ... ] } } 

These are the only limitations as per the documentation :

...

Note that these expressions are used to parse individual attribute + value pairs, so a single Handlebars expression cannot have multiple attributes. For example, the following markup will not be recognized:

 <img src="logo.svg" {{#if logo_title}}alt="{{logo_title}}" title="{{logo_title}}"{{/if}} /> 

Instead, each attribute should be individually wrapped:

 <img src="logo.svg" {{#if logo_title}}alt="{{logo_title}}"{{/if}} {{#if logo_title}}title="{{logo_title}}"{{/if}} /> 

To do this, you just follow your markup, and it will work without problems.

Answer 3

The same workaround, with the exception of regular expressions for Jekyll tags:

 var jekyllConditionalWrapOpen = /\{\% if[^}]+\%\}/; var jekyllConditionalWrapClose = /\{\%[^}]+endif \%\}/; var jekyllConditionalWrapPair = [jekyllConditionalWrapOpen, jekyllConditionalWrapClose];