Uglify entire project (.css, .js, .html files relatively)

Question

Recently I've started using Grunt and it really helped to minify/concatenate .css files and minify/uglify/concatenate .js files. Also I automated compiling and restarting server with grunt watch, express. I was happy.

Suddenly I wanted to uglify my .css files when I saw 85 occurrences of ".wrapper" class in my style.css. This .wrapper class used in my templates (jQuery.tmpl), .js files. I've seen uglified .css classes in gmail source code and I hope I can do it too.

My purpose is to replace '.wrapper' with '.w' (any short name) in all .css, .html, .js files. How can I uglify all classes, ids in .js, .html, .css files relatively?

Answer 1

There are 2-3 processes at work when you "uglify" something:

1. Minification - Eliminates unnecessary whitespace in your text files.
2. Obfuscation - Where you rename variables, classes, etc. into smaller names to save characters.
3. Concatenation - Where you merge multiple files together to eliminate unnecessary HTTP requests.

It looks like you're primarily talking about obfuscation so that's what I'll address. There are two tools that I know of that work pretty well and can be used in a build process:

1. HTML Muncher - HTML Muncher is a 5 year old Python based tool. It can only deal with HTML, CSS, and JS files so you'll have to compile your static assets before shipping it over to this Python based tool. Also, it doesn't work well with escaped class/id names or special characters (so keep yours alpha based and only use digits after the first alpha character). Finally, it obfuscates names based off of a hashid.. so the class names aren't as succinct as you'll want them.

2. The css-loader is used as a part of Webpack - Webpack allows us to use loaders to transform files and pass them in as dependencies in front-end "bundles". The css-loder has this cool feature called Local Scope that essentially allows you to rename your classes and id's based on your webpack config. Webpack can be difficult to setup and it's pretty difficult (at the time of this writing) to get these obfuscated class names into HTML files. But if you can get it working and make it a part of your build, I think this tool has a lot of promise!

At this time, I'd say that if you can't make Webpack a part of your build, it's probably not worth obfuscating your CSS at this time unless you can handle all the problems that HTML Muncher has.