As recommended by Yahoo on YSlow – tip #1: Make fewer HTTP request and tip #10: Minify javascript- we aim to implement these tips on all our projects with minimal head-ache. While these recommendations are truly useful, implementing them can be quite tedious and challenging. Consider having to maintain multiple min versions of the javascript and the files that links to them! So to alleviate the problem, we created a tool called low-tides (as part of open-tides) that helps automate the merging and minification of css and js files.
So what is the rationale behind the the tool?
- Maintenance of minified js and css is a nightmare. Keeping separate js and css files for development and production can be very confusing. Some developers might change the production version without syncing with the development version. So eventually, changes to different files becomes a mess — Which one has the latest code?
- Maintenance of html files that links to proper javascript and css is another problem. Since minified versions are likely to have different filename (e.g. basic-min.js), html codes that reference the scripts need to be changed. This leads to having multiple copies of html files… again.
- Versioning of html, css, and js files introduce a whole new set of configuration items. Imagine bullets #1 and #2 getting multiplied across a number of version releases!
- At the time of this writing, there are no tools available that can merge multiple javascripts. The development version of javascript needs to be logically separated while the production version needs to be merged (for lesser http request). Moreover, merging javascript is not straightforward. Some javascripts need to be pre-loaded while others can be postponed.
I suppose by now you get the picture. The solution we propose to this configuration problem is simple: Always change from the development version and have a deployment script automatically create the production version. As such, files are always maintained from the development version – but the key to this approach is to ensure that the script for creating production versions is quick and easy-to-use.
Now here comes Low-tides. Low-tides is a Java-based program that automatically analyzes html files for javascript and css includes. It will merge includes that are in sequence into a single file and minify it. In summary, it automatically solves all the problems mentioned above.
You can download it here: http://code.google.com/p/open-tides/downloads/list
Usage instructions are available here: http://code.google.com/p/open-tides/wiki/LowTides
The post Low-tides : JS/CSS Merging and Minification Tool appeared first on Ideyatech - Java Development Outsourcing Philippines.
