requireJS Optimizer: possible to minify HTML files too?

1
votes

i have a project folder with backbonejs, jquery and requirejs, after calling my gruntfile script using the requirejs optimizer it creates my optimized file working like a charme in my browser. But i would like to get my HTML files minified, to save some bytes when they get loaded in the application.

I tried using grunt-contrib-htmlmin after the r.js optimization, but this plugin requires me to defines each HTML file, but i have plenty of files, would be great to define the HTML folder to minify.

Is that possible with requirejs optimizer or any other way (maybe some grunt plugin)?

4
requirejsgruntjsr.js

4 Answers

1
votes

expandMapping can be useful in cases like this. A whole directory can be minified and its structure kept intact, without having to list every html file within the directory. Like so:

htmlmin: {
    dist: {
        options: {
          removeComments: true,
          collapseWhitespace: true
        },
        files: grunt.file.expandMapping(['path/**/*.html', 'path2/**/*.html'], 'destination/', {
            rename: function(destBase, destPath) {
                return destBase+destPath;
            }
        })
    }
}

The output would be:

path/test.html => destination/path/test.html
path/subpath1/abc.html => destination/path/subpath1/abc.html
path/subpath2/yey.html => destination/path/subpath2/yey.html
path2/foo.html => destination/path2/foo.html

The same principle can be used with any plugin, though some plugins might require more configuration to do what one intends to do with the files.

1
votes

I would take an other approach and develop your html code in Jade. Jade has a clean syntax, make your write html code with less mistakes (e.g. an input tag does not have a closing tag).

Example code:

html
   head
   body
      //- this comment won't be shown in the html output
      .someClass.secondClass
         p Hello world

With grunt-contrib-jade you can compile the jade files to html files.

All you need is configuration in your Gruntfile.js:

       jade: {
            staging: {
                options: {
                    pretty: true
                },
                files: [
                    {
                        expand: true,
                        src: '**/*.jade',
                        dest: 'target/staging/',
                        cwd: 'src/',
                        ext: '.html'
                    }
                ]
            }
        },

For development builds you use the pretty option. For production (minified) you leave out the pretty option.

With pretty the output of the above example would be:

<html>
  <head></head>
  <body>
    <div class="someClass secondClass">
      <p>Hello world</p>
    </div>
  </body>
</html>

Without it is:

<html><head></head><body><div class="someClass secondClass"><p>Hello world</p></div></body></html>
0
votes

Yo cannot minify HTML, as you can not minify CSS. The concept of minifying is someway related to programming languages, and HTML is a descriptive language rather than a programming one.

What you want is a way to transfer your files better to the browser. You can achieve that by two standard ways, both related to the web server and HTTP protocol:

  1. Enabling gzip compression: enable GZIP compression
  2. Caching in the browser: How to set HTTP headers (for cache-control)?
0
votes

You can build the files object dynamically ( Check http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically )

The code snippet that you can use in your gruntfile.js would be like

 htmlmin: {
 build: {
     options: {
         removeComments: true,
         collapseWhitespace: true
     },
     files: [{
         expand: true,
         src: ['*.html'],
         dest: 'html/',
         ext: '.min.html'
     }]
 }
}