reference multiple js files in a single line in a html file

Question

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?

Instead of this -

<script type="text/javascript" src="js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/browseCtrl.js"></script>
...

I'm looking for something like this -

<script type="text/javascript" src="js/controllers/*.js"></script>

Or is there a tool out there that copies the contents of these files into one file and reference that one file instead? This will be minimize the HTTP calls.

Answer 1

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?

For some value of "easy". There is nothing built in to browsers that will do it though.

Or is there a tool out there that copies the contents of these files into one file and reference that one file instead?

There are many. cat is the simplest one.

Call it from your usual build tool.

You can use something like require.js to combine them at runtime during development, and call r.js via Node from your build tool for packaging for your staging and live environments.

Answer 2

You can give Require.js a go. Require.js is the only JavaScript-file that is loaded through the script-tag. When you go out of development you can use Require.js's r.js to minify and concat everything into one file.