Does not compress the "same" as YUIcompressor

[tim-peterson]

The README states, "It does the same job as YUI Compressor's CSS minifier".

I found that the shrinking of my 355kb CSS file (which is largely comprised of Twitter Boostrap and jQueryUI) using YUI compressor shrinks it to 244kb but using Clean-CSS it only gets to 288kb. Both were done using the default settings.

Maybe not a major point but the README claim is not factual as far as I can tell.

[XhmikosR]

/sarcasm on
You should sue @GoalSmashers. How dare he making such false statements. Let alone providing the tool for free.
/sarcasm off

The fact that for your specific css you find another tool doing a better job does not mean the claim is wrong.

Feel free to do a proper test compressing various stylesheets and then you will be able to draw clear conclusions.

[tim-peterson]

@XhmikosR I'm not trying to be a jerk just trying to be precise. I'm of course incredibly grateful for this freely available tool.

All I'm saying is that is probably better to say something like it "emulates" YUICompressor rather than "does the same job".

I interpreted "does the same job" as the author having replicated the YUI Java application in Javascript. It is not about being better or worse, its just appears not to be the "same".

[XhmikosR]

Let's see what the Readme says again then.

Clean-css is a node.js library for minifying CSS files. It does the same job as YUI Compressor's CSS minifier, but much faster thanks to many speed optimizations and node.js' V8 engine.

As you can see, nowhere in the Readme is stated that Clean-css offers the same compression or better than YUI Compressor's CSS minifier. The same job means that its purpose/job is the same as YUI Compressor's CSS minifier and that it does that job faster due to node.js' V8 engine.

Regardless, I'm personally very interested in some benchmarks if you are up to it. And the last time I brought this up, @GoalSmashers was interested too.

[tim-peterson]

I read "same job" as "same algorithm" though I think our interpretations are both clear now:

me=> purpose!=job
you=> purpose=job

I'd be happy to include some benchmarks that show the Kb size output for Clean-css vs. YUIcompressor.
I could make a pull request to include a folder with two common css files: bootstrap.css and jQueryUI.css and how the % compression compares. @GoalSmashers does that sound good?

I'm less concerned about how fast the compression occurs and wouldn't know how to do that benchmark.

[XhmikosR]

If #43 is implemented it would make things much easier to compare. I don't think there is a need to include those css files in the repository though.

But I'll let @GoalSmashers comment more on this.

[GoalSmashers]

What a heated discussion this is, @tim-peterson and @XhmikosR! :-)

First of all "doing the same job" means stripping CSS out of any extra content. That's what both YUI and clean-css do. Implementation is different and that's the reason of different results. But the goal is to be as good as YUI or even better! Work is by no means finished!

I think we should add a section in Readme / wiki page comparing both the speed and compression ratio. Both matter but compression ratio is something more important since 10 seconds saved on compression is nothing to 1GB/day saved on transfer. Although if you build frequently or on-the-fly then speed matters.

@tim-peterson - please send a PR with both files (let's say in a new bench folder) and possibly with your custom CSS file if it's possible for you to share it.

We'll do the rest!

[tim-peterson]

@GoalSmashers sounds good, give me until later today. I can give my custom CSS too since it'll be on the internet soon enough anyway when my site goes live. Facebook taught us that there is no point in hiding anything! :)

[GoalSmashers]

Sure, please take your time. Looking forward to your custom CSS too.

In the meanwhile I got my hands on yui-compressor 2.4.7 and compared it quickly to clean-css 0.10.1 on test/data/big.css file from our repository.

On my machine - MBP 2012 2.3 GHz w SSD it takes ~1.5s to minimize it using YUI (it's Java so quite understandable) and ~0.1s with clean-css. Here's the size comparison (both tools used with default options):

-rw-r--r--  1 jakub  staff  283033 Feb 20 22:43 big-min-cleancss.css
-rw-r--r--  1 jakub  staff   45462 Feb 20 22:48 big-min-cleancss.css.gz
-rw-r--r--  1 jakub  staff  284039 Feb 20 22:39 big-min-yui.css
-rw-r--r--  1 jakub  staff   45512 Feb 20 22:48 big-min-yui.css.gz
-rw-r--r--  1 jakub  staff  350264 Jun  4  2012 big.css

Clean-css wins by a narrow margin of 1kB although only 50 bytes after gzip compression (gzip -9).

That's by no means a scientific verification but we will have it.
Thanks for starting the discussion!

[GoalSmashers]

And all of these makes me eager to look at your case! :-)

[tim-peterson]

@GoalSmashers Ok, simply updating Node by itself did the trick. My TP-demo.min.css file is now 244kb.

For future users, here's a gist of how i updated my version of Node..

At the moment, I wasn't able to figure out how to use your command to update Clean-css:

clean-css TimPeterson$ npm update -g clean-css

Running the above, didn't give any errors, but when I went to use clean.css to minify my TP-demo.css file I got this error:

module.js:340
    throw err;
          ^
Error: Cannot find module 'commander'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Applications/MNPP/Library/nginx/html/application/third_party/clean-css-master/bin/cleancss:8:16)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain (module.js:497:10)

[XhmikosR]

That's because commander is a new dependency in 0.10.

[GoalSmashers]

So it got installed correctly but with wrong dependencies. Can you tell us what 'which cleancss' command tells you?

Since npm has changed a lot since node 0.4 it may be some upgrade issue.

On 21 Feb 2013, at 17:26, XhmikosR notifications@github.com wrote:

That's because commander is a new dependency in 0.10.

—
Reply to this email directly or view it on GitHub.

[tim-peterson]

Thanks for the tip about upgrading npm.

As soon as I did that (npm update npm -g), and then re-installed cleancss (npm install clean-css), i succeeded in minifying TP-demo.css to 246kb.

So now i'm using node v0.9.10 and cleancss v0.10.1 and problem solved! Thanks for your help!

p.s. i couldn't figure out how to get which cleancss to output anything.

[GoalSmashers]

Great, you are welcome!

On 21 Feb 2013, at 18:31, tim peterson notifications@github.com wrote:

Thanks for the tip about upgrading npm.

As soon as I did that TimPeterson$ npm update npm -g, and then re-installed cleancss npm install clean-css, i succeeded in minifying TP-demo.css to 246kb.

So now i'm using node v0.9.10 and cleancss v0.10.1 and problem solved! Thanks for your help!

—
Reply to this email directly or view it on GitHub.