How to minify HTML with CSS and Javascript?

Try http://prettydiff.com/. It offers automatic language detection and can minify html, css, and javascript. This tool presumes that script tags without a mime type or with a javascript relevant mime type must contain either javascript or nothing. Likewise, style tags without a mime type or with the "text/css" mime type are presumed to contain CSS. The CSS and JavaScript are minified accordingly. The tool itself is written in javascript. There is no reason you should have to use more than one tool.

Closure compiler has been correctly recommended for JS; but not many are aware of Google's Closure stylesheets. One of the closure stylesheets features is renaming, where

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

would become

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

There'll be further minification too; and given the fact that OP indicates all resources are included into the html, this may end up saving quite a bit in traffic overhead.

NB: if you inspect any Google search results page, you'll see their class and ID names are almost never longer than 4 random characters

I am afraid you'll have to do it in two steps:

1. manual search and replace of global objects in a text editor
2. minifiers to finish the job on css and js

I had a similar question some time ago (about global objects and object keys). The answer I got was that no tool will make assumptions about the global context. In your example, they won't minify "pageLoad" because it might be used by another html or js fragment you didn't provide.

A workaround in your example would be to make the pageLoad function local and add the onload event dynamically in the script:

elt.onload=function(){pageLoad();};

While JavaScript code can be compressed and decompressed within JavaScript (see other answers), it's actually hard to achieve the same result in CSS. There is currently no tool that will do more than remove unnecessary whitespace (see also Are there any agressive CSS Minification tools?), since identifier and class names cannot be changed without destroying the link between HTML and CSS.

Also, you can't remove anything from HTML markup except whitespace. Well, you could minify the class names and identifier, but there's currently no tool that will update those minified values in your CSS/JS files, so this would render your website ugly and broken. And even empty elements are often needed in order to get some CSS effects right (yes, I'm looking at you, IE6). This applies to JavaScript function names too.

TL;DR: Unfortunately there's no all-in-one-minify-everything tool. The closest thing is htmlcompressor.

I advise the HTML5 Boilerplate Build Script which can minify your JS and CSS.

Features:

• Combines and minifies javascript (via yui compressor)
• Inlines stylesheets specified using @import in your CSS
• Combines and minifies CSS
• Optimizes JPGs and PNGs (with jpegtran & optipng)
• Removes development only code (any remaining console.log files, profiling, test suite)
• Basic to aggressive html minification (via htmlcompressor)
• Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
• Revises the file names of your assets so that you can use heavy caching (1 year expires).
• Upgrades the .htaccess to use heavier caching
• Updates your HTML to reference these new hyper-optimized CSS + JS files
• Updates your HTML to use the minified jQuery instead of the development version
• Remove unneeded references from HTML (like a root folder favicon)
• Runs your JavaScript through a code quality tool (optional)
• Optionally precompile LESS formatted CSS
• Optionally output JSDOC3documentation

Have never tried it but have heard real good reviews of Google's Closure compiler..You may want to try it out

Good javascript compressor is also Google's Closure Compiler and vice versa, to make compressed code a bit better readible you can use Javascript Beautifier. You can also have a look at phpEasyMin project.