2
So, I’ve been looking for the best way to compress my CSS files and also the bulky Javascript files that I need to use on websites that I build. Beautiful websites can sometimes weight a lot, in terms of file size due to the large external files that your browser is trying to load. So, I came across the YUI Compressor, which supposedly has the best compression rate out of all the CSS and Javascript compressors out there. So, I decided to download it, and see if I could wrap my brain on how to use it.
I’m guessing that this tutorial will help out many a designer like me who’s not that familiar with the command line…
So, here goes…
1. Go to the YUI Compressor website, and click on “Download” under the Quick Links heading.
2. Extract the file using whatever ZIP extractor you use on your computer.
3. If you are using a PC, right-click on Start, and click on Explore. Once in Explorer, navigate to the place you unzipped YUI Compressor, and double-click on it. Once inside the unzipped YUI Compressor folder, double-click on the folder that says “Build”. Then, highlight the address in your Explorer address bar. Mine reads like this:
C:\Documents and Settings\HP_Administrator\Desktop\yuicompressor-2.3.5\yuicompressor-2.3.5\build
You will need to paste this in a little while once you go to the Command Prompt.
Alright, so now you need to take whatever CSS or Javascript file you are wanting to compress, and Copy it to the same Build folder that you were just in.
Now, click on Start, then click on Run, and type in “cmd” and Hit the Enter key on your keyboard. At the command prompt, type in:
cd “C:\Documents and Settings\HP_Administrator\Desktop\path\to\yui-compressor\build”
Once you do that, then type in:
java -jar yuicompressor-2.3.5.jar whatever-your-file-is-named.css -o new-filename.css
And press the Enter key. Your newly created, and compressed CSS file should be sitting in the Build folder that you were just in with the new filename you made for it.
I must say that this YUI Compressor is a pretty sweet tool and should be very useful for any developer wanting to decrease CSS or Javascript file size.
filed under: CSS, Javascript, Tips, Tutorials | permalink
One Response to “YUI Compressor Tutorial”
-
Stu Says:
May 9th, 2008 at 1:50 amThanks, I was having trouble getting this to work. You’d think they’d have something like this in the help file (’cmd for dummies’).