Minify JS embedded into .html file

Question

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.

Can you maintain your unimified javascript in a separate file and use grunt to minify the javascript and then replace a token in the html file with the minified javascript? — Sam Greenhalgh
– Sam Greenhalgh, Commented Aug 31, 2016 at 15:06
@SamGreenhalgh, yes, it would work, but how to debug these .html files? — Oleg Kuralenko
– Oleg Kuralenko, Commented Aug 31, 2016 at 16:24

Chad Killingsworth · Accepted Answer · 2016-09-01 21:22:27Z

3

The Polymer Project tools of Vulcanize and Crisper can facilitate this.

Cripser will strip out JavaScript to it's own file, you can then minify it with the tool of your choice.

Vulcanize will take an external JavaScript file and inline it back.

answered Sep 1, 2016 at 21:22

Chad Killingsworth

14.4k2 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg Kuralenko · Accepted Answer · 2016-09-02 18:49:17Z

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">

Ming C · Accepted Answer · 2018-10-02 21:41:25Z

With Webpack, you can use html-webpack-inline-source-plugin. This is an extension plugin for the webpack plugin html-webpack-plugin. It allows you to embed javascript and css source inline.

Here is how it looks like in webpack.config.js:

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  entry: { index: 'src/index.js' },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      minify: {
          collapseWhitespace: true,
          removeComments: true,
          minifyJS: true,
          minifyCSS: true
      },
      inlineSource: '.(js|css)$'
  })
  ...

Then all .js and .css will be inline in generated index.html.

References:

Collectives™ on Stack Overflow

Minify JS embedded into .html file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related