HTML Muncher

Overview

HTML Muncher is a command line utility written in Python that rewrites classes and ids in CSS, HTML, and JavaScript files in order to save precious bytes and obfuscate your code. View source on this page to see it in action.

Installation

easy_install http://htmlmuncher.com/htmlmuncher.egg

Download the source

cd html-muncher
python setup.py install

The HTML muncher is used with the Vimeo Universal Player for all embeds.

View source on this video to see what it looks like:

Demo

Enter some html with inline css and/or javascript and click "munch":

<html>
<head>
    <title>view with inline styles</title>
    <style type="text/css">
        .content {
            padding: 25px 0px 50px 0px;
            overflow: hidden;
        }

a {
            color: #FF5F1E;
        }

.content, #footer {
            width: 800px;
        }

ul.menu {
            width: 200px;
            float: left;
        }

#main {
            width: 500px;
            float: left;
        }

ul {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

ul li {
            margin-top: 20px;
        }

ul li.first_child {
            margin-top: 0px;
        }

.box {
            width: 500px;
            border: 1px solid #aaa;
            padding: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            margin-bottom: 15px;
            background: #fff url("../test.jpg");
        }

.green {
            background: #ACFFB9;
        }

.blue {
            background: #C5D7FF;
        }

#footer ul {
            text-align: center;
        }

#footer ul li {
            display: inline;
            margin-left: 20px;
        }

#footer ul li.first_child {
            margin-left: 0px;
        }

p.special span {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>test page with inline styles</h1>

<div id="main">
            <div class="box green">
                <p>this is a green box</p>
            </div>

<p class="special">this is <span>paragraph</span></p>
        </div>
    </div>

<div id="footer">
        <ul>
            <li class="first_child"><a href="#">footer link 1</a></li>
            <li><a href="#">footer link 2</a></li>
            <li><a href="#">footer link 3</a></li>
            <li><a href="#">footer link 4</a></li>
        </ul>
    </div>
</body>
</html>

How it Works

You pass in a list of CSS, HTML, and JavaScript files to be rewritten
The CSS and JavaScript files are scanned to find any class and id references
The classes and ids are mapped to new classes and ids with 1 or 2 letter names (a, b, c ... aa, ab, ac ...)
The files are rewritten with the new class and id names and saved to a new location on disk

You still have to do work on the server side to tell your site to use the optimized versions of the files

Usage

A simple muncher command looks like this:

munch --css /path/to/css --js /path/to/js --html /path/to/html

There are many arguments you can use:

--html*: comma separated list of html/view files or directories to process
if there is a file view.html the new file created will be view.opt.html
if there is a directory views a new directory will be created views_opt
--css: comma separated list of css files or directories to process
--js: comma separated list of js files or directories to process
--ignore: comma separated list of classes and ids to ignore
this looks like .ignore_class,#ignore_id,#ignore_other_id
these classes and ids will not be renamed by the muncher
--view-ext: view extension to look for if a directory is passed in for --html argument
defaults to html
--compress-html: strips new line characters to compress html files specified with --html
be careful with this because it has not been thoroughly tested
comments using // instead of /* */ could end up commenting out a lot of code
--framework: js framework to use when processing js files
current options are jquery or mootools
--selectors*: comma separated list of css-like selectors used in javascript
for example if you used $.qs("#id > .class") then you would pass in qs
document.querySelector is added by default
--id-selectors*: comma separated list of selectors for selecting an id by string
for example if you have a method addId("name") you would pass in addId
getElementById is added by default
--class-selectors*: comma separated list of selectors for selecting a class by string
getElementsByClassName, hasClass, addClass, and removeClass are added by default
--js-manifest: path to a js file containing class name/id constants
while the muncher does a pretty good job finding classes and ids in javascript, javascript is a dynamic language so there is definitely the possibility that it won't find everything.
a js manifest file is a javascript file that contains a list of all the class names and ids.when this is passed into the muncher it will only rename the classes/ids found in this file.the other files will still reference them as variables
more information about using a manifest file coming soon
--rewrite-constants: when using a manifest file this will take any constants with values as strings and rewrite the values to be numbers
this is useful for development so you can debug the constants and see what they are without having to look up a number each time
--show-savings: outputs the number of bytes/kb saved by munching before and after gzip
--verbose: shows more information about what is happening
--help: brings up the help screen

* required argument

* passing in js selector values is not perfect but because javascript is such a dynamic language it is somewhat necessary to try to find classes and ids to rename

assigning class names or ids to variables in javascript will not work when using the muncher unless you use a js-manifest file