HTML5 Boilerplate plugins.js

Question

How is one expected to include additional js files in plugins.js? Is the expectation that we just copy and paste the contents of each plugin there? Or is there some method of doing a js include that I should be using?

Specifically, I'd like to see an example of goes within this function:

// remap jQuery to $
(function($){

})(this.jQuery);

Answer 1

That section of the html5boilerplate is sort of an abbreviation of what should/could go there.

You can approach plugins.js a few ways:

1. Ignore it and include all of your JS plugins as separate files (undesirable)
2. Manually concatenate and minify the plugin files (this is a pain to maintain)
3. Use a script to concatenate them (and cache it) at run-time (like this)
4. Use a makefile to concatenate/compress like a ninja (like this)
5. Use a slick JS library like yepnope.js to asynchronously load your plugin files as needed.

There's a lot of options for including your JS plugins...you'll have to weigh them yourself, of course. I usually use options 3 or 4, though I need to start using 5.

As for what goes in the snippet of code that you gave:

(function($){
  // This is a wrapper for your jQuery stuff 
})(this.jQuery);

You'll see that block of code wrapping a lot of jQuery plugins (check the docs). It can be used to wrap your jQuery-specific code so you can make use of $ while keeping your site in jQuery compatibility mode...which lets your site play nicely with other libraries that may use $ as well.