Back to Wonderant - http://www.wonderant.com

Tuesday 24 May 2011

A taglib for modular JavaScript and CSS

I would like to have nice modular style sheets.  I want a tabs.css, I want a global.css, I want a specific style sheet for overrides for a particular page - homepage.css.

What I don't want, is to end up with more than one style sheet include on my html pages which leads to long page load times.


Furthermore, I want this to work dynamically in my test environment, but statically in my live environment.  That is to say, when I'm testing in Jetty, I want the global style sheet to be regenerated each time one of the modular style sheets changes, but when I'm on the live site, I only want the global style sheet generated once, and persisted to disk.

And while we're at it, I want this to work with JavaScript includes as well, and everything needs to be minimized.

It seems that this is a bit unreasonable as I couldn't find any tag libs out there that did this.  For anyone who thinks this might be useful, here's what it ended up looking like in the jsp,

Stylesheets
<c:set var="location">
    <wa:compressor 
        files="/stylesheets/style.css,/stylesheets/tagcloud.css,etc..." 
        outputDir="/stylesheetsGlobal/" 
        regenerate="${true}" />
</c:set>
<link rel="stylesheet" href="${location}" type="text/css" />


JavaScript
<c:set var="location">
    <wa:compressor 
        files="/javascript/jquery.js,/javascript/main.js,etc..." 
        outputDir="/javascriptGlobal/" 
        regenerate="${true}" />
</c:set>
<script src="${location}"></script>

The jar file for this can be downloaded here:  http://www.warrenprojects.com/files/wonderant-tags-1-dist.zip
The maven source project here: http://www.warrenprojects.com/files/wonderant-tags-1-src.zip

No comments:

Post a Comment