requireJS Optimizer: possible to minify HTML files too?

Question

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)?

score 1 · Answer 1 · answered Feb 26 '14 at 21:21

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.

score 1 · Answer 2 · answered Feb 28 '14 at 08:30

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>

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

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:

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

edited May 23 '17 at 12:32

Community

1
1

answered Oct 31 '14 at 09:45

David Lemon

1,560
10
21

Thats wrong, minifying HTML and CSS is possible by removing whitespace and comments. However, there is no easy way to mingle css class names unless you also include some transformation in the respective html. But enabling compression and caching is good advice! – mfeineis Jun 16 '15 at 15:40
The minificacion you achieve by eliminating whitespaces is not comparable to js minification. It does not worth it as compression deals with all the whitespaces. HTML comments are also not very common these days. – David Lemon Jun 16 '15 at 16:13
Concerning the whitespace and compression you're right, iff you don't have to maintain a legacy IIS that doesn't support http compression (like me :-/). Wach out for HTML comments: just open any medium sized blog running on wordpress *g*. I myself do use them quite often since [knockoutjs](http://knockoutjs.com) supports virtual elements with them. The -1 is harsh for good advise though, sorry for that - bad trigger habbit. I would like to vote you up right now, but SO won't let me – mfeineis Jun 16 '15 at 16:35
Think before voting next time, downvoting is for rare cases. Also, a high percent of the front end best practices we do will be harmful with http2 https://mattwilcox.net/web-development/http2-for-front-end-web-developers – David Lemon Jun 17 '15 at 07:45
Upvoted @DavidLemon because he's technically correct. You don't minify HTML per se (like javascript), but you can condense unnecessary whitespace, which is probably the intent of the question. – mwoodman Sep 09 '16 at 18:29

Prayag Verma · Answer 4 · 2014-11-02T06:10:40.873

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'
     }]
 }
}

requireJS Optimizer: possible to minify HTML files too?

4 Answers4