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.

score 1 · Answer 1 · answered Aug 01 '14 at 00:42

1

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

answered Aug 01 '14 at 00:42

Samuel Neff

73,278
17
138
182

Well, this library does not uglify CSS. – artuska Aug 01 '14 at 11:15

score 1 · Accepted Answer · answered Aug 01 '14 at 03:08

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.

answered Aug 01 '14 at 03:08

tadatuta

2,007
11
12

So, why did Google uglify all CSS classes everywhere in their services? Or may be it is only in Gmail, but anyway… – artuska Aug 01 '14 at 11:08
1

@artuska, The CSS is generated by GWT, not hand written. – Samuel Neff Aug 17 '14 at 16:42
what's the point of uglifying JS if it isn't to make long names shorter so you feed less into GZip? – Toni Leigh Nov 10 '15 at 22:40

CSS uglify — Grunt task

2 Answers2