Jquery - How do you convert $ (document) .ready () to js file?

Question

I have a ton of jquery code in .ready ()

$(document).ready(function() { //jQuery goodness in here. 

How to take all the code and just make it a .js file so that I can just refer to the script like any other script? Should I minimize it? How to do it?

I read this post: Closing an external jQuery file in $ (document) .ready ()

But that did not help, because I am not sure how to implement it. Am I just copying the code exactly as it is and save it as a .js file? Then what about the minimization process?

Thanks!

Answer 1

Step 1. Create the myfile.js file with the contents:

 $(document).ready( function() { // .... your jQuery goodness .... }); 

Step 2. On your HTML page, first enable jQuery, then enable myfile.js (in that order).

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="myfile.js"></script> 

Step 3. PROFIT!

Step 4. (OPTIONAL) . Modify myfile.js using http://jscompress.com/ or something else minifier you want to use.

Answer 2

You can write all your codes in a function and call it when dom is ready. Minimization is recommended in order to make you smaller → faster loaded. You can find many online js compressors such as http://www.refresh-sf.com/yui/