Question

Often, when working with jQuery, the need arises to include multiple plugins. This can quickly become messy work, especially when some plugins require additional components (images and CSS files).

What are some of the “recommended” ways to:

• a. Manage the required files/components (.js, .css and images) in a way that is easy to maintain, and;
• b. Keep these plugin packages updated to the latest versions

I’m not necessarily looking for a tool to do this (although one that could perform this management would be useful, I suppose), but more of a way of thinking.

Answer 1

Update: These days there is Bower, Component and Browserify which take care of all of the following for us automatically.

I’m surprised no one has covered what I do yet. So here’s how I manage scripts and resources.

I have each project I work on setup with SVN. Nearly all of the scripts I include have a SVN mirror (github has svn these days) this means that I can then use SVN externals and fetch whatever branch or version or whatever I want of that project directly into the projects scripts folder. As we are using SVN, it is easy to track, manage and update these scripts.

If a project is not on SVN, then I just add it to a common SVN project I have made, so for instance Project A and Project B, both use jquery-project-not-in-svn, so we stick jquery-project-not-in-svn into our common project’s SVN repository, and then use SVN externals on Projects A and B to reference it – as explained before.

Now that covers managing, fetching and updating.

Here is how I cover script inclusions and requests.

As each project now has it’s own scripts directory that contains all the scripts it needs (which is managed by SVN externals), we now have to worry about minifying them to reduce load on our server. Each project has a Makefile in it’s root, which contains the command update. This command will perform the following:

• Perform a SVN update (this will update all SVN externals appropriately)
• Once that is done, it will pack and minify all the js files into scripts/all.js and scripts/all.min.js

I can’t share the exact Makefile but I can share one which is public that handles packing/merging and minification of CSS and Javascript. Here is the link:
http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

By doing these things, we have achieved:

• Management of external script resources over multiple projects
• Updating of appropriate script resources automatically
• Packing all used script resources of the project into one file
• Minifying that file, such that only one JS request and one CSS request are performed.

So good luckmate, feel free to post a comment if you would like to learn more.