Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best. Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it’ won’t obfuscate your code.
Compressors work by removing all comments and whitespace (line breaks), and in some cases they will actually analyze your code and shrink variable names. Using compression can result in up to a 60% decrease in file size! So lets get started in learning how to use the YUI compressor!
First, it’s probably a good idea to read about YUI, so check out the video introducing it at http://developer.yahoo.com/yui/compressor/
Now, lets go and download the latest version: http://www.julienlecomte.net/yuicompressor/ – also since this runs on Java, make sure you have Java installed and updated.
Open up the folder that was downloaded and grab the file in the “build” folder named yuicompressor-x.x.x.jar and you can delete everything else since we won’t need it just to use the compressor.
For this example I’m going to compress jQuery and jQuery UI, first go download them and be sure to get the uncompressed version of each, since we can’t really further compress an already compressed file. Just open these two files, select all of jQuery UI and copy/paste that to the end of the jQuery file. The resulting uncompressed file is 436k and over 13,000 lines of code!
If you’re using a Mac, you’ll need to open up the terminal (found by navigating to /Applications/Utilities/Terminal.app), and if you’re using Windows you’ll need to open the command line (Start > Run > type “cmd” and hit enter).
Now in the Terminal/Command Line here’s the syntax for basic compressing with YUI:
java -jar /path/to/yuicompressor.jar path/to/original.js -o path/to/output.js
Instead of typing all these file paths, luckily we can just drag files onto the terminal/Command line and it will write the path out for us. So here’s what you need to do:
- Type
java -jar(type a space after) and then drag theyuicompressor.x.x.x.jarfile into the window – this tells it that we want to run java code from a .jar file, and then we give it the file to run. - Type another space and drag the file you want to compress into the window.
- Another space then type
-oto specify that you want to write the compressed output into a new file. - Now you need the path to the output destination file that does not yet exist. So what I usually do is drag the same file into the window, and then use the arrow keys to go back a few characters and rename the file.
- Just hit enter and that should do it!
As you can see, we went from 436k down to 264k – which is a 60.5% decrease! Also, it now has no comments and it’s all on a single line of code which makes it next to impossible to read, so be sure to keep a backup. This is especially true if you are compressing a script that you wrote, if you don’t keep a backup you will forever loose your comments and formatting.
23 replies
First of all, how did you get the background color of your terminal changed? Second of all, I just learned how to access the terminal today, third of all, I don’t get much of this post, but I guarantee that if you post more stuff about php, you’ll most likely get me to read some more. Although you don’t post often. Peace Bro!
Open
Terminal > Preferences > Settingsand there’s lots of color and transparency options there.What didn’t you understand here? I guess some command line stuff can be confusing if you haven’t messed with it before.
Next time you work on a site, use this and give it a shot. Remember it works with CSS files as well!
If, like me, you don’t feel comfortable in terminal, you can use one of several online interfaces for the YUI Compressor.
Here’s one: http://refresh-sf.com/yui/
Very cool Mike, I was looking for an online version and could never find one. Thanks!
Mike thanks for the link of online version and Chris, thanks.
This is a joke right? I mean it has been 20 YEARS since I had to run programs like this.
Yahoo cannot produce a front end to run this app.? That’s embarrassing. What kind of programmers have they got?
Paul, there’s *plenty* of front ends to this tool. Search the web a little, or just look at these comments.
Additionally, a text-based backend is very sensible. I’ve got my web server to compress the JS on the fly, gzip it and cache it, then serve. This lets me roll out new JS with ease, and not worry about tracking multiple JS files in my DVCS.
@Paul
Surely it you who are joking, this is designed to be run as an automated task as part of the build process.
It’s embarrassing that you think everyone needs a GUI interface.
Hi all,
I recently tried to use the YUI Compressor and came accross this online version. http://yui.2clics.net/
Thanks
Thanks so much for this, Chris! I’m a beginner writing a shell script to automatically minify our JS and CSS every time we do a sync and push live, and nowhere on the YUI Compressor website does it say that we only need to extract the .jar file. Your post helped a lot!
I wrote a Window Batch file to call the YUI Compressor from command line automatically. So, you can do batch compression without the need to call the javac manually one by one in the command line.
http://jeeshenlee.wordpress.com/2010/07/30/batch-process-yui-compressor/
I’m using OSX 10.4.11 and your script was giving me an error with the ‘dirpath’ variable having the ‘YUI.scpt’ filename being included in the path to ‘yuicompressor-2.4.2.jar’ eg (Terminal got an error: Unable to access jarfile /Users/Username/Desktop/YUI-compressor-script/YUI.scptyuicompressor-2.4.2.jar)
I did a manage to get it to work and wanted to share the code with anyone that is having the same problem.
AFTER LINE:
set dir to the selection as alias
ADD:
set dir to return container of dir as text
Now, after saving the script as an application, it works!
Only problem now is that when CSS files are compressed they are appended with min.js
Okay I couldn’t stop tweaking out on the code and I have it successfully adding the correct extension based on if it’s a .js or .css file.
Also, the original code re-writes the file names with the original file extension still intact (eg. styles.css.min.css or scripts.js.min.js). This is fixed now. Here is the working code (must be saved as an Application)
on run
tell application "Finder"
set this_item to choose file with prompt "Choose CSS or JS file:"
set dir to the selection as alias
set dir to container of dir as text
set ext to name extension of this_item
set newName to this_item as text
set newName to text 1 thru ((offset of "." & ext in newName) - 1) of newName
end tell
set newPath to posix_path(newName)
set mypath to posix_path(this_item)
set dirpath to posix_path(dir)
runCompression(mypath, dirpath, newPath, ext)
end run
on posix_path
(mac_path)set mac_path to (mac_path as text)
set root to (offset of ":" in mac_path)
set rootdisk to (characters 1 thru (root - 1) of mac_path)
tell application "Finder"
if (disk (rootdisk as string) is the startup disk) then
set unixpath to "/" & (characters (root + 1) thru end of mac_path)
else
set unixpath to "/Volumes:" & mac_path
end if
end tell
set chars to every character of unixpath
repeat with i from 2 to length of chars
if item i of chars as text is equal to "/" then
set item i of chars to ":"
else if item i of chars as text is equal to ":" then
set item i of chars to "/"
else if item i of chars as text is equal to "'" then
set item i of chars to "'"
else if item i of chars as text is equal to """ then
&nbs
p; set item i of chars to "" & """
else if item i of chars as text is equal to "*" then
set item i of chars to "*"
else if item i of chars as text is equal to "?" then
set item i of chars to "?"
else if item i of chars as text is equal to " " then
set item i of chars to " "
else if item i of chars as text is equal to "" then
set item i of chars to "\"
end if
end repeat
return every item of chars as string
end posix_path
on runCompression
(mypath, dirpath, newPath, ext)tell application "Terminal"
do shell script "java -jar " & dirpath & "yuicompressor-2.4.2.jar " & mypath & " -o " & newPath & ".min." & ext
end tell
end runCompression
oops, I am typing this in the wrong plac:) My apologies
FYI, the above script is an Applescript (for mac) that will automate the process without the need to use terminal. The original post is here:
http://thinkclay.com/technology/applescript-yui-compression
Sorry for blowning up your comments:)
cheers,
Chris Barr: why aren’t the web server compression modules more commonly enabled? Doing this at the server level on-the-fly (and caching requests) seems like far more of an elegant solution than adding this to a workflow. To be clear, I’m not criticizing you or this article, it is definitely very useful particularly to those who don’t have direct access to their web server configs – obviously minifying stuff is a pretty common thing, I’m just wondering if you have any particular opinions as to why the server-side compression isn’t the norm (particularly since most web servers are probably more disk bound than they are CPU bound)?
It’s starting to become more of a thing, check out the bundling feature in ASP.NET 4.5 which does exactly this and makes it easy. I’m not too familiar with other frameworks and if they have anything similar available. This article is a bit old now and there are many better tools to use to make this easier. Many of the ones I’m familiar with will just create a compressed version every time the file is saved, simple.
@Chriss can i compress all my js files in a project in to one single minified .js file?? if so please tell how to do it?
You can, but this may not be the best tool for the job. There are lots of tools out that that will do exactly that and much more, the one that comes to mind for Mac OSX is CodeKit.
If nothing else you could do this the quick-n-dirty way by copy/pasting all your JS into one file (order matters!), make sure it still works uncompressed, then compress it.
Many thanks for putting this together; I’m new to minifying code, and this is by far the best tutorial I’ve found. Thanks again :D
I have a folder. Inside that I have 100 js files. How to do them in bulk.
Could you please update the tutorial on how to do use Yuicompressor with Node.js/NPM? Thanks!
I have yet to use node.js, but this was originally written before either node or NPM were really the big things they are today. Search google, there are tons and tons of ways to compress javascript files automatically with node.