I'm using grunt-contrib-htmlmin to minify my html in a backbone/underscorejs project, however, when I run grunt-contrib-htmlmin on any underscorejs template that has <%= myvar %>, the task outputs a parse error. Is there a way grunt-contrib-htmlmin can ignore text inside <%= and %>?

I'm using grunt-contrib-htmlmin to minify my html in a backbone/underscorejs project, however, when I run grunt-contrib-htmlmin on any underscorejs template that has <%= myvar %>, the task outputs a parse error. Is there a way grunt-contrib-htmlmin can ignore text inside <%= and %>?

• javascript
• underscore.js
• gruntjs

• This isn't solving the actual problem with htmlmin, but at least you can change the delimiters from <% to eg. mustache-style {{ myVar }}. Read about "interpolate" setting at: documentcloud.github.io/underscore/#template – Samuli Hakoniemi Commented Nov 19, 2013 at 21:38
• 1 How will changing <% to {{ allow me to use htmlmin on underscorejs templates? – wwwuser Commented Nov 25, 2013 at 22:28
• OP, did you find a way to solve it? – FRD Commented Feb 12, 2014 at 2:27
• I didn't. I'm still looking for a solution. – wwwuser Commented Feb 12, 2014 at 19:21

3 Answers 3

Since you posted this issue, an new feature was introduced into html-minifier (which is used by grunt-contrib-htmlmin) to ignore the interpolation tags that were causing the problem.

For instance, the following html partial:

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

Will now minify to:

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

Before the changes, it would have resulted in an error.

You can try this using the demo on the website to test it out. If that works, you can update your project to make use of the new version.

This issue is old but grunt-contrib-htmlmin and html-minifier can take new options.

As already mentioned by @mckramer, grunt-contrib-htmlmin sits on top of html-minifier so you are able to add additional options:

customAttrAssign:<value>

Arrays of regex'es that allow to support custom attribute assign expressions

customAttrSurround:<value>

Arrays of regex'es that allow to support custom attribute surround expressions

The solution

Example grunt configuration (for double braces {{ }}):

var hbAttrWrapOpen = /\{\{(#|\^)[^}]+\}\}/;
var hbAttrWrapClose = /\{\{\/[^}]+\}\}/;
var hbAttrWrapPair = [hbAttrWrapOpen, hbAttrWrapClose];

htmlmin: {
  blabla: {
    options: {
      ...
      customAttrSurround: [hbAttrWrapPair]
    },
    files: [
      ...
    ]
  }
}

These are the only limitations according to the documentation:

...

Note that these expressions are used for parsing individual attribute+value pairs, so a single Handlebars expression may not span multiple attributes. For example, the following markup would not be recognized:

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

Instead, each attribute must be individually wrapped:

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

That's it, just you keep an eye on your markup and it will work without issues.

Same workaround, except with regexps for Jekyll tags:

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