Time and thoughts

Home Blogs TILs Papers Projects Writings

AngularJS - grunt task htmlmin and collapseBooleanAttributes

I wanted to insert all the partials and views as a template for my Angular app. Luckily there is a Grunt task that does this. A small thing I wanted to do before this was making the HTML small. Remove the whitespaces, remove comments etc. htmlmin is exactly for this. I got a configuration for this:

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: ['**/*.html','*.html'],
          dest: '<%= yeoman.dist %>/.tmp/html/app'

Funny thing that happened with this was that I had a directive called date-picker that had an attribute called default which accepts the default string for the drop down selection. When I ran this script the value that was being passed via default was getting truncated. After doubting few other tasks, I finally zeroed down the problem to htmlmin task. It was the option collapseBooleanAttributes: true that created the problem. default accepts boolean value in the unextended HTML world and this was optimised my htmlmin.

So ensure that if you are using directives and you are over-riding default HTML attributes, htmlmin might give you surprises.