Aggressively removes whitespace from HTML; while taking into account each element's CSS properties to ensure the layout of the file is unchanged.
Inline JavaScript and CSS are minified using UglifyJS and clean-css respectively.
$ unreadable --inspect --url http://www.youtube.com --output youtube.min.html
12643 characters removed, 986/986 elements with layout unaffected by minification
-h, --help output usage information
-V, --version output the version number
-u --url [value] URL to process
-i --inspect Inspect layout before and after, to verify no elements have changed size or position (slower)
-o --output [value] File to write minified source to
-c --config [value] Path to JSON configuration file (see https://github.com/JamieMason/Unreadable#config)
npm install -g unreadable
You'll need to Download & Install PhantomJS.
You can override any of Unreadable's defaults by providing a path to a JSON file.
unreadable --url http://... --config path/to/my/unreadable.json
Only the values you want to override need be defined, so to enable removal of optional closing tags for example - your file would look like this;
{
"unreadable": {
"remove_optional_closing_tags": true
}
}
All default values can be found in defaults.json, but here are the key ones;
Some element's closing tags can be omitted, resulting in a much smaller file. But, doing so can affect layout (http://jsfiddle.net/csswizardry/UMYZs/) so this is disabled by default.
Omitting these element's closing tags is permitted, add/remove any you want to include/exclude as preferred.
These elements don't have closing tags, such as <img src="nevergonna.png"></img>
.
These values are applied to UglifyJS and are documented at https://github.com/mishoo/UglifyJS
Since we're Uglifying JavaScript found in <script>
blocks as opposed to external files, I wouldn't recommend changing this value.