All geek questions in one place

Collapse JS embedded in .html file

I have an HTML file with embedded javascript code, here is 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 is the easiest way to get the same file with all the JS fragments inside it?

An HTML file can be arbitrarily complex and have several script fragments. For a number of reasons, I don’t need js divided into separate .js files in the resulting html.

We use the closure compiler and have grunt in the project.

+4
source share
2 answers

1: html- minifier, , (https://github.com/gruntjs/grunt-contrib-htmlmin, https://github.com/kangax/html-minifier#options-quick-reference)

, grunt :

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

2:

https://github.com/Polymer/vulcanize https://github.com/PolymerLabs/crisper   @Chad Killingsworth.

  • Crisper (.html .js)
  • .js .
  • Vulcanize, , , , .html

. , js js , , Vulcanize Crisper. , , .

3:

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

, , Vulcanize, , , ,

: 5 ( ):

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

HTML, ,

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

, :

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

Polymer Vulcanize Crisper .

Cripser JavaScript , .

Vulcanize JavaScript .

+2

Source: https://habr.com/ru/post/1653174/

More articles:


All Articles