Menu
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.
408
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.
92
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.
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">
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:
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
