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.
3 answers
solution1
3 2016-09-01 21:22:27
solution2
1 ACCPTED 2016-09-02 18:49:17
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">
solution3
0 2018-10-02 21:41:25
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.