Development Mode – Concatenating Scripts and CSS
By Adrian Sutton
HTML 5 Boilerplate reminded me of an old-school tool which is extremely useful for concatenating JS and CSS files on the fly – server side includes:
<FilesMatch ".*\.combined\.(js|css)$"> Options +Includes SetOutputFilter INCLUDES </FilesMatch>
Then you have a main scripts.combined.js (or css) which contains:
<!--#include file="libs/backbone-min.js" --> <!--#include file="libs/underscore-min.js" --> <!--#include file="libs/jquery-1.7.1.min.js" -->
Plus any other files you need, in the order you specify. This works great for development mode so you can change a file on the fly and just refresh the browser without running any kind of build script. When it comes time to push to production, it’s easy for a build script to process the file ahead of time and be confident that you’ll get exactly the same result.