Writing jQuery in separte files to support concatenation in production <p>For now I have written my <strong>.js files</strong> as followed because I think, this is simple for maintenance.</p> <pre><code>//main.js $(function() { //declare variables, functions }); //page1.js $(function() { //whatever for page1 }); //page2.js $(function() { //whatever for page2 }); </code></pre> <p>In <strong>.html</strong> I just have to specify which <strong>.js files</strong> to load, this is working so far because the individual <strong>.html</strong> is assigned with the right <strong>.js files</strong></p> <pre><code>&lt;!-- page1.html --&gt; &lt;script src="main.js"&gt; &lt;script src="page1.js"&gt; &lt;!-- page2.html --&gt; &lt;script src="main.js"&gt; &lt;script src="page2.js"&gt; </code></pre> <p>If I plan to concatenate all <strong>.js files</strong> into one single <strong>.js file</strong> for production purpose, how should i restructure my <strong>.js files</strong> to support concatenation so in each <strong>.html</strong> i can only use <code>&lt;script src="all.js"&gt;</code></p> <p>Please guide what to do. Thanks.</p>