Fork me on GitHub

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

OR

Download the source

cd html-muncher
python setup.py install

vimeo

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":

How it Works

  1. You pass in a list of CSS, HTML, and JavaScript files to be rewritten
  2. The CSS and JavaScript files are scanned to find any class and id references
  3. The classes and ids are mapped to new classes and ids with 1 or 2 letter names (a, b, c ... aa, ab, ac ...)
  4. 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

©2014 craig campbell