How do you manage your Javascript files?

Question

Nowadays, we have tons of Javascript libraries per page in addition to the Javascript files we write ourselves. How do you manage them all? How do you minify them in an organized way?

Answer 1

Organization

All of my scripts are maintained in a directory structure that I follow whenever I work on a site. The directory structure normally goes something like this:

+--root    |--javascript       |--lib          |--prototype.js          |--scriptaculous             |--scriptaculous.js             |--effects.js             |--..       |--myOwnScript.js       |--myOwnScript2.js 

If, on the off chance, that I'm working on a team uses an inordinate amount of scripts, then I'll normally create a custom directory in which we'll organize scripts by relationship. This doesn't happen terribly often, though.

Compression

Though there are a lot of different compressors and obfuscators out there, I always come back to YUI Compressor.

Inclusion

Unless a site is using some form of a master page, CMS, or something that dictates what can be included on a page beyond my control, I only included the scripts necessarily for the given page just for the small performance sake. If a page doesn't require any script, there will be no script inclusions on that page.

Answer 2

First of all, YUI Compressor.

Keeping them organized is up to you, but most groups that I've seen have just come up with a convention that makes sense for their application.

It's generally optimal to package up your files in such a way that you have a small handful of packages which can be included on any given page for optimal caching.

You also might consider dividing your javascript up into segments that are easy to share across the team.