Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 408
ffeast Avatar asked Aug 31 '16 14:08

ffeast


3 Answers

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.

like image 92
Chad Killingsworth Avatar answered Oct 18 '22 19:10

Chad Killingsworth


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">
like image 1
ffeast Avatar answered Oct 18 '22 21:10

ffeast


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:

  • html webpack plugin
  • Inline Source extension for the HTML Webpack Plugin
like image 1
Ming C Avatar answered Oct 18 '22 21:10

Ming C