New Perspectives On Web Design

By Mat Marquis CHAPTER 5

We’ll still use Grunt to combine our initial JavaScript files and our
global CSS, since they’ll never vary on the client side — where QuickConcat
shines is our asynchronous requests. Rather than writing multiple script
and link tags into the page and sending out a handful of requests, we can
use Enhance.js to prepare a list of scripts and style sheets that apply to the
user’s context and request them all at once:

(function(win, undefined){
var mqSupport = "matchMedia" in win && win.matchMedia( "only all" ).matches;
if( !mqSupport && !respond.mediaQueriesSupported ){
return;
}

ejs.addFile.jsToLoad( "js/lib/jQuery.js" );
ejs.addFile.jsToLoad( "js/lib/konami-code.js" );

// Load custom fonts > 600px
if( window.screen.width > 600 ){
ejs.addFile.cssToLoad( "css/fonts.css" );
}

if( Modernizr.touch ) {
ejs.addFile.jsToLoad( "js/swipe.js" );
ejs.addFile.cssToLoad( "css/swipe.css" );
}

ejs.enhance();
})( this );

When Enhance.js is invoked, all the files queued up with
ejs.addFile.cssToLoad and ejs.addFile.jsToLoad are sent off
as a single request, through QuickConcat.
I usually refer to QuickConcat as a pattern because it’s rarely
something that drops into a production environment as is. It’s usually
something that we’ll hand off to clients for implementation in their back-
end language of choice.