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
4 thoughts on “Low-tides : JS/CSS Merging and Minification Tool”
Hi!
I liked the idea of low-tides and am trying to use it. But I’m having some problems with the way it handles directories for the js/css files… Is the source code available so that I can try to spot the problem?
thank you!
Thank you Paulo for your comment. I’ve shared the project in google code.
You can download it here [http://code.google.com/p/open-tides/source/browse/#svn/trunk], under trunk/lowtides.
Hi Allan,
It’s been a long time since my last comment!
Since then, I used low tides a little bit, and it is working nicely now. But I had to make a few modifications to allow it to work properly in my environment.
So, the point is, I can send you back these modifications, if you are interested. Actually, I think Low Tides deserves to be an open source project of its own.
Anyway, if you want to talk about any of the two issues above, please feel free to send me an e-mail =)
[]s,
You have a good Blog right here Mate. Adore your articles really informative, Please retain up the great work.