By Mat Marquis CHAPTER 5The trouble is, between Enhance.js, Respond.js, our Modernizr build,
and our new enhancement test, we’ve just added four blocking requests to
the head of the page. We could chuck all of these into a single file, but that’s
likely to cause us headaches when it comes time to update any of these
libraries.
To avoid inconveniencing ourselves or burdening users with additional
requests, we’ve recently introduced the Grunt task-running framework^13
to our development process. Grunt can be set to watch a directory and
concatenate your files whenever anything changes, meaning you can
keep all your libraries and custom JavaScript in separate files and work
on them as usual, but link your templates to a single automatically
generated “dist” file that’s ready for production. It will do the same for
your style sheets, allowing you to split up your enhanced CSS and organize
your development environment however you’d like, but output a single
concatenated file. Further, Grunt will minify all your JavaScript and CSS,
lint your code for errors, run your unit tests, or run any custom task you
could imagine — all done automatically, via the command line. Grunt has
very quickly become an indispensable part of our development process.
With our concatenated initial JavaScript file in place, we now have a
framework for conditionally loading files as needed, based on the user’s
context. We can asynchronously load larger JavaScript libraries, plugins
and custom scripts that apply site-wide without delaying the page load.
If we have custom scripts to add swipe interaction on touch devices, we
can feature-detect for touch events and include those scripts, and their
corresponding styles, only if they’re needed. If there are any unique parts
of the site with highly specific CSS or JS, we add a class to the body tag and
load those page-specific scripts and style sheets only when those pages are
loaded.
Remember that there will be a slight delay when loading a style sheet
using this method. Be sure to limit this approach to styles for specific