Search code examples
javascripthtmlminifygoogle-closure-compiler

Minify JS embedded into .html file

I have an HTML file with javascript code embedded, here's a simple example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type=”text/javascript”>
    // javascript code 
    </script>
</head>
<body>
<!-- some html -->
</body>
</html>

What's the easiest way to get the same file with all JS snippets minified inside it?

HTML file can be arbitrarily complex and have multiple script snippets. For a number of reasons I don't need js split into separate .js files in the resulting html.

We use closure compiler and have grunt in the project.

Solution

  • Option 1: Use html-minifier which can do exactly what I need out of the box (https://github.com/gruntjs/grunt-contrib-htmlmin, https://github.com/kangax/html-minifier#options-quick-reference)

    So the grunt snippet would look like this:

    htmlmin: {                                                              
    demo: {                                                         
        options: {                                                      
            removeComments: true,                                       
            collapseWhitespace: true,                                   
            minifyJS: true                                              
        },                                                              
        files: {                                                        
            'demo/demo.html'      
        }                                                               
    }                                                                   
}

    Option 2:

    Use https://github.com/Polymer/vulcanize and https://github.com/PolymerLabs/crisper as @Chad Killingsworth suggested.

    • Crisper enables extraction of embedded scripts into external files (.html and .js)
    • Resulting .js files can be minified using any available minification tool
    • Vulcanize, in turn, can combine all the files resulting from the previous steps into a single .html file

    Looks like the most flexible approach. Besides, the original js could be stored in separate js files and then simply combined into single file using only Vulcanize without Crisper. Didn't have a chance to combine it into a grunt task that does what was requested though.

    Option 3:

    Grunt embed (https://www.npmjs.com/package/grunt-embed, https://github.com/callumlocke/resource-embedder)

    Although it looks dead and does only a subset of things that Vulcanize can do, it provides awesome features like embedding depending on resource size and data attributes indicating what needs to be embedded

    Grunt example: embed any external scripts and stylesheets under 5KB in size (the default threshold):

    grunt.initConfig({
  embed: {
    some_target: {
      files: {
        'dest/output.html': 'src/input.html'
      }
    }
  }
})

    Html markup which would embed a particular resource, regardless of filesize

    <script src="foo.js" data-embed></script>
<link rel="stylesheet" href="foo.css" data-embed>

    To embed a particular resource only if it is below a certain size:

    <script src="foo.js" data-embed="2000"></script>
<link rel="stylesheet" href="foo.css" data-embed="5KB">