Automated JS/CSS combining/minifying system - JSS Build Environment

Recently I wrote a post about JS compressors and how they compare to each other. Now I've build a system for combining and/or minifying JS and CSS files. This system uses Google's Closure Compiler for JS minification and Google's Closure Stylesheets for CSS minification. Both of them require Java, so if you want to use 'Compress' option, then you'll need to install it and point JSS Build Environment to java.exe. I recommend extracting jPortable to a folder next to this EXE file.

Features:

- JavaScript combine and minify
- CSS combine and minify
- Automatic combine/minify when one of the input files is changed.
- Control over the sequence of combining
- Minimizing to system tray
- Single EXE without installer

Setup:

close-compiler is the folder containing compiler.jar file of Closure Compiler.
closure-stylesheets is the folder containing closure-stylesheets.jar of Closure Stylesheets.
Java folder contains extracted files from jPortable.
JSS Build Environment can run without all of these folders, but you'll only have combine option.

Usage:

To use this app, you need to add files to CSS or JS panels (or both), choose Output file and click Build. It's as simple as that. Of course this only activates combining. No compression is applied. If you want compression, then you have to setup files as described in Setup above and then check Compress checkbox before building.
Now let's talk about Auto Build feature. This is really useful feature when you need to build every time you change something. Auto Build monitors the files and when some file is changed it starts build procedure. Build procedure includes compression if it's checked, but I recommend not checking it, as compression takes time and you'll need to wait a lot just to see let's say your text in red. Combining Auto Build with minimizing to system tray and some balloons makes things look and work really good.

Download:

JSS Build Environment
Source Code (in Delphi XE)

Happy codding ;)

JavaScript Compressors Comparison

Recently I got back a bit to my old hobby - writing JS in my spare time. There is something in me that makes me optimize things. I love optimizing, no matter if it'll be a drop in the ocean, a lost time. But no matter how much you optimize, you never can beat a JavaScript compressor. So, I decided to test a couple of JS compressors available for free online use and see which is the best. For this purpose I used two files, from some of my JS projects:

JSOS.js - 97.8 KB (100 227 bytes) of mainly procedure oriented code, written for my JavaScript Operating System 5 years back. The code is a crap. Not one standard is kept while writing. Hell, I didn't even knew there are standards back then. And I didn't knew about compressors neither, so I compressed as much as I could by hand.
portfolio.js - 45.9 KB (47 020 bytes) of mainly object oriented code, written for my portfolio. Code is a bit new (one year old or so), but I still don't like it :D

The compressors I choose to benchmark are:

1. Google's Closure Compiler
2. Yahoo's YUI Compressor
3. Microsoft's Ajax Minifier
4. Dojo's shrinksafe
5. Online Javascript Compression Tool

Ok, lets see how they do on default settings.

1. Closure Compiler
JSOS.js - 88.1 KB (90 220 bytes)
portfolio.js - 39.4 KB (40 374 bytes)
2. YUI Compressor
JSOS.js - 89.8 KB (92 035 bytes)
portfolio.js - 34.5 KB (35 406 bytes)
3. Ajax Minifier
JSOS.js - 88.4 KB (90 537 bytes)
portfolio.js - 33.9 KB (34 734 bytes)
4. shrinksafe
JSOS.js - 93.6 KB (95 885 bytes)
portfolio.js - 36.8 KB (37 767 bytes)
5. Online Javascript Compression Tool
JSOS.js - 89.2 KB (91 358 bytes)
portfolio.js - 34.5 KB (35 381 bytes)

Let's wrap-up these results in graphics:

Or in percents:

As we can see, the "default" winner for crappy procedure oriented code is Google's Closure Compiler with just 317 bytes ahead of Microsoft's Ajax Minifier. For object oriented crappy code, the "default" winner this time is Microsoft's Ajax Minifier, while previous winner, Google's Closure Compiler is at last place.
Now let's see what those compressors can do at their best:


1. Closure Compiler
JSOS.js - 35.5 KB (36 376 bytes)
portfolio.js - 31.5 KB (32 352 bytes)
2. YUI Compressor
JSOS.js - 89.8 KB (92 035 bytes)
portfolio.js - 34.5 KB (35 406 bytes)
3. Ajax Minifier
JSOS.js - 84.7 KB (86 767 bytes)
portfolio.js - 33.2 KB (34 056 bytes)
4. shrinksafe
JSOS.js - 92.3 KB (94 562 bytes)
portfolio.js - 36.1 KB (36 991 bytes)
5. Online Javascript Compression Tool
JSOS.js - 89.2 KB (91 358 bytes)
portfolio.js - 34.5 KB (35 381 bytes)

In graphics:

and in percents:

Yes, I noticed Closure Compiler, too! At first I thought it produced a non working code, but when I tried it - it works as a charm! I don't know how they did it, but they did it :) So apparently the "max" winner for crappy procedure oriented code is Google's Closure Compiler. For crappy object oriented code, the "max" winner is again Google's Closure Compiler with a lead of more that 1k of code. Notice Yahoo's YUI Compressor and Online Javascript Compression Tool - they both have the same numbers as for default test?!?!? Well, their default settings are actually their best settings. That's a bit disappointing, as default settings of some compressors are better that the best settings of YUI Compressor, and I know a lot of people are using it. So I recommend to those people to switch to Closure Compiler.

Let's make an average to name a winner by the normal formula:
1st place = 5 points
2nd place = 4 points
3rd place = 3 points
4th place = 2 points
5th place = 1 point
Results:

	Closure Compiler	YUI Compressor	Ajax Minifier	shrinksafe	OJSCT
Points	16	10	17	5	13

So the order is:
1. Ajax Minifier
2. Closure Compiler
3. Online Javascript Compression Tool
4. YUI Compressor
5. shrinksafe
You agree with that? Neither do I. This formula is good for other uses. Here we should really find how many bytes are saved, average. Let's see the same table again, but this time with bytes and percents saved.

	Closure Compiler	YUI Compressor	Ajax Minifier	shrinksafe	OJSCT
Bytes	95172	39612	48400	29289	41016
Percents	32.32	13.45	16.43	9.95	13.93

Now we see who the real winner is:
1. Closure Compiler
2. Ajax Minifier
3. Online Javascript Compression Tool
4. YUI Compressor
5. shrinksafe

So next time you need to shrink JS files, consider Closure Compiler as a good choice :)