11

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?

Ikrom
  • 4,785
  • 5
  • 52
  • 76
  • there are many different solutions built nowadays... Maybe you should read this topic: http://stackoverflow.com/questions/28932/best-javascript-compressor hope it help. – Carlos Jan 27 '14 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 compress 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 Jan 27 '14 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 Jan 28 '14 at 16:09
  • I haven't tested it, but this might do the trick? https://github.com/yiminghe/grunt-class-id-minifier – Kristof Feys Jan 28 '14 at 16:14
  • @KristofFeys Good job! I've tried and it uglified .html file. But it could not uglified .css file completely. Only uglified the most outer class names in .css file. So far it's not usable. – Ikrom Jan 28 '14 at 17:02
  • This is a different approach, so it may not be considered a straight answer, but it will help: Enable http compression for JS and CSS. The result will be smaller than any minification and you will still retain human-readable files. It even makes websites run faster - the network overhead with the larger files is apparently more costly than compression and decompression combined. – Zdenek Jun 20 '14 at 21:26
  • possible duplicate of [Minifying and Obsfucating CSS similar to Javascript](http://stackoverflow.com/questions/4597914/minifying-and-obsfucating-css-similar-to-javascript) – Benjamin Solum Jul 16 '15 at 21:50

1 Answers1

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

Benjamin Solum
  • 2,281
  • 18
  • 29
  • Thanks Benjamin, I saw HTML muncher solution but I am not sure how can I make it part of my CI/CD process, please suggest if you have tried that. – Arpit Goyal Nov 05 '18 at 05:52