You may remember my posting a while ago about the importance of build scripts in an Interface Developer's workflow (see here).
Lately I've been knocking out some Ant scripts and realised there's a bit of my process that's worth sharing.
Goals of optimisation
The goal of most the scripts I write at the moment (at least the part related to CSS & JavaScript) is to compress the content as much as possible and into the least amount of files. The end result is less files get downloaded and those that do make the most efficient use of their bytes.
This also means the build forms a clear distinction between development code (designed for reading & sharing by humans) and production code (designed for downloading by devices & processing by their browsers).
What we're forgetting
All of this is very good and healthy but it misses one thing we used to take for granted. As explained above, production code is for devices & their browsers but the web is not just a delivery device for programs, it's also designed for reading & sharing by humans, just like our development code.
This is important. One of the beautiful things about the web is that you can dig into sites or apps people have made and see how they tick. It's no coincidence that web development has a large amount of self-taught people working in it and I feel it would be a real shame to lose this just for lack of process.
So, a conundrum. How do we satisfy both sets of requirements?
Erm, quite simply actually
Turns out it's not that difficult. There's a few ways I could think of off the top of my head but they all involve one step: providing a link to the development code in the production. Here's how I do it:
- Concatenate my files.
- Create a directory (I call mine full) & copy them into it.
- Optimise the original scripts.
- Concatenate a standard comment onto the bottom of all files explaining how to access the full versions.
Here's a sample comment from a recent project:
/* A full version of this file is stored in a directory called 'full' at the js/ or css/ level. Add 'full/' into the file path, after 'js/' or 'css/' to access. For example, the full version of /assets/js/core-scripts.js is /assets/js/full/core-scripts.js */
The last step is the most important. Providing a URL, or a way to build one means your code is available in both forms and I don't personally think the extra characters will make enough difference to not do this.
If anyone else is doing something similar but differently I'd be interested to know as this is a first-pass at best.
