CSS uglify — Grunt task

Question

I wonder are there any Grunt tasks which uglify CSS? Like in GMail code — all class names are random 2-3 letters.

I'm using AngularJS and grunt-angular-templates Grunt task to concatenate all templates in views/ folder to a single templates.js $templateCache file and I want to make this file as small as possible.

I have index.html, main.css and views/ folder with bunch of HTML files — I want to uglify all CSS class names in all these files, 'cos I'm using BEM class name notation, so my CSS class names are rather long.

Answer 1

if the only reason to uglify is the length of classnames — just don't. gzip (use zopfli for the best result) makes all that long BEMish classes just same 2-3 letters long but on server level.

Answer 2

Here's a library to uglify css. If you want to use it in grunt then wrap it in a custom grunt task.

https://github.com/fmarcia/UglifyCSS