CODEWITHSUNDEEP
javascripthtmltemplatesgruntjsminify
Ikrom
Ikrom

Reputation: 5103

Minify jQuery tmpl html templates

I want to minify my .html file. I've tried to minify with grunt-contrib-htmlmin, grunt-processhtml. They actually couldn't minified. Then I realized that all my html elements wrapped in jQuery.tmpl. It seems these minify tools don't touch script tags. So I've bunch of templates looks like this:

<script id='wrapper' type='text/x-jquery-tmpl'>
  <div class='person-wrapper'>
    {{html $item.html()}}
  </div>
  <!-- many html tags -->
</script>

My question is how can I minify (jQuery.tmpl) templates? I'm using Gruntjs to minify .css, .js files. But any tool or plugin is appreciated.

Upvotes: 1

Views: 982

Answers (4)

user3274745
user3274745

Reputation: 361

If you are using sublime text try adding this package which shall minify it for you:

HTML COMPRESSOR.

Upvotes: 1

Benjamin
Benjamin

Reputation: 1001

Your server should send this data gzip-compressed. Then any additional compression/minification is not necessary.

Edit: The benefit of minification+compression should be much less for HTML than for JavaScript. Because in HTML there are no function or variable names that can be rewritten like in JS.

Upvotes: 0

Teo Dragovic
Teo Dragovic

Reputation: 3518

Try checking out htmlcompressor. According to their documentation it should compress code inside your template tags:

Any content within <pre>, <textarea>, <script> and <style> tags will be preserved and remain untouched (with the exception of <script type="text/x-jquery-tmpl"> tags which are compressed as HTML).

It's Java library but it also has grunt plugin.

Hope it helps.

Upvotes: 1

Andrew Webb
Andrew Webb

Reputation: 132

Not really the perfect solution, but this is what I do:

Minify just the HTML without wrapped in the script tags, then where ever you normally import them, use server-side includes. (In my case, PHP)

<head>
   <script id='wrapper' type='text/x-jquery-tmpl'>
     <?php require "templates/person.tmpl.min.html" ?>
   </script>
</head>

Upvotes: 0

Related Questions