javascript - Uglify entire project (.css, .js, .html files relatively) - Stack Overflow

Recently I've started using Grunt and it really helped to minify/concatenate .css files and minify/uglify/concatenate .js files. Also I automated piling 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?

Recently I've started using Grunt and it really helped to minify/concatenate .css files and minify/uglify/concatenate .js files. Also I automated piling 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?

• javascript
• html
• css
• obfuscation

Share Improve this question Follow edited Jan 28, 2014 at 16:08 Ikrom asked Jan 27, 2014 at 18:47 IkromIkrom 5,12155 gold badges5454 silver badges7878 bronze badges 7

• there are many different solutions built nowadays... Maybe you should read this topic: stackoverflow./questions/28932/best-javascript-pressor hope it help. – Carlos Commented Jan 27, 2014 at 19:04
• He's asking about CSS uglification though, not JS. @bob The problem with obfuscating (uglifying) CSS is that you also have to capture any HTML uses of those classes or IDs and any uses in JavaScript code. If you simply press the CSS file to use .w instead of .wrapper but don't change all HTML files using .wrapper then your site will break. I don't know of an easy solution to this problem with a basic Grunt task. – Jordan Kasper Commented Jan 27, 2014 at 20:47
• @jakerella I've removed gruntjs tag. I want to know any method or tool to uglify my .css file along with .js, .html files. – Ikrom Commented Jan 28, 2014 at 16:09
• I haven't tested it, but this might do the trick? github./yiminghe/grunt-class-id-minifier – Kristof Feys Commented Jan 28, 2014 at 16:14
• @KristofFeys Good job! I've tried and it uglified .html file. But it could not uglified .css file pletely. Only uglified the most outer class names in .css file. So far it's not usable. – Ikrom Commented Jan 28, 2014 at 17:02

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

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 pile 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.