How come putting all my jquery plugins into a single file won't work?

Before, I had this:

<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script type="text/java开发者_如何学编程script" src="{{MEDIA_URL}}js/plugins/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/alertbar.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.masonry.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.growfield2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.placeholder.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.color.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/tipsy/src/javascripts/jquery.tipsy.js"></script>

Everything works when I load the page, and there are no errors. My friend told me to merge them all into 1 file. So I did:

find somedir/ -name '*.js' -exec cat {} + > ../allplugins.js

Now, when I include "allplugins.js", I'm getting Uncaught type errors. Object # has not method "editable"

You should concatenate your javascript plugins in the same order that you import them.

You can do that by listing them in a file (say plugins.list), one line for each filename. Then build allplugins.js using:

cat plugins.list | while read jsfile; do
  echo
  echo "//===== `basename "$jsfile"` ====="
  cat "$jsfile"
done > ../allplugins.js

For example, if you have a file inc.js that has

obj = { 'editable': function(){ return 42; } };

And then script.js that tries to use the object defined in inc.js:

obj.editable()

If you reverse the order of those two files, you can see that obj is being used but has not yet been defined.

The files merged are not in a proper order due to dependency on other. merge with the same order as previously it was working.

edit sorry — the stuff about using ">>" instead of ">" is probably unnecessary, as the redirection happens at the level of the "find" command so it should work out OK. Sorry about that.

this stuff is unnecessary

Should be:

find somedir/ -name '*.js' -exec cat {} + >> ../allplugins.js

(That is, ">>" instead of just ">".) Precede that with:

rm ../allplugins.js

or something to the same effect, or else each time you build you'll make the file bigger.

end unnecessary part

Another problem you'll face is that the files will be concatenated based on an ordering that is likely to be completely arbitrary, while they almost certainly have interdependencies that call for a particular partial ordering. You should either rename the files in your tree such that that simple concatenation command does its thing in the right order, or else explicitly list the files out in the right order for concatenation. The original sequence of script tags you've got would be a nice starting point for the ordering of your files.

Also, find your friend and throw a water balloon at him/her.

I noticed you tagged this question with django. You may be interested in django-mediasync which automatically handles js file concatenation for you (see http://pypi.python.org/pypi/django-mediasync/2.0.0#joined-files):

Joined files are specified in the MEDIASYNC dict using JOINED. This is a dict that maps individual media to an alias for the joined files.

'JOINED': { 'styles/joined.css': ['styles/reset.css','styles/text.css'], 'scripts/joined.js': ['scripts/jquery.js','scripts/processing.js'], },

Files listed in JOINED will be combined and pushed to S3 with the name of the alias. The individual CSS files will also be pushed to S3. Aliases must end in either .css or .js in order for the content-type to be set appropriately.

The existing template tags may be used to refer to the joined media. Simply use the joined alias as the argument:

{% css_print "joined.css" %}

When served locally, template tags will render an HTML tag for each of the files that make up the joined file:

<link rel="stylesheet" href="/media/styles/reset.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="/media/styles/text.css" type="text/css" media="screen, projection" />

When served remotely, one HTML tag will be rendered with the name of the joined file:

<link rel="stylesheet" href="http://bucket.s3.amazonaws.com/styles/joined.css" type="text/css" media="screen, projection" />

This is designed to use a static content site via something like Amazon S3, but it could also be used to just serve the static media from your local server, while automagically handling file contactenation.