Stop Concatenating CSS Files

One of the common examples of the limits of Maven and other “strict” build tools was how difficult is to concatenate CSS files together as part of the build. It’s nice to be able to split CSS files up to categorize things but the extra HTTP requests really slow down page loads, so the build should concatenate them back together. What I’ve come to realise though, is that building a custom concatenation script is just another instance where people are reinventing the wheel in build systems, and getting less power as a result.

Instead of using plain CSS and concatenating, use something like LESS to compile the CSS. You can specify the CSS files to import with the usual @import statement and LESS will do the concatenation for you. This is particularly nice since the order of import is specified right in the CSS files, rather than in the build script and you can build full hierarchies of imports. Plus, you get the full power of LESS, with variables, includes etc etc if and when you want to use it. There are a range of CSS compilers beyond LESS and a range of ways LESS can be integrated into a variety of build tools, however I wound up just doing it dynamically with the LESS Servlet. Then it sets headers appropriately and optimises CSS and JavaScript with YUI compressor while it’s at it.

This of course leaves me wondering if something like Google’s Closure could do the same kind of thing for JavaScript files. The question being not just, can Google’s Closure concatenate JavaScript files for me, but rather can it do that plus give me a bunch of other useful tools for free?