Monday, May 28, 2012

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.


- 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


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.


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.


JSS Build Environment
Source Code (in Delphi XE)

Happy codding ;)

No comments :

Post a Comment