Combining JS and CSS files as part of build

Question

I want to concatenate all my JS files to reduce the number of HTTP requests a browser makes when it goes to my website. Of course, there's still value in keeping these files separate during development. The widely accepted solution is to perform the concatenation as part of the build.

The concatenation part is pretty straightforward.. but what about all the HTML files that still have a bunch of <script src="*.js"> tags referencing the pre-concatenated js files? They need to now point to the single concatenated javascript file.

How can I swap out those references as part of the build?

Answer 1

An Ant-based solution might be derived from this example. I'll insert the standard disclaimer that 'parsing' HTML with regular expressions may not be a good idea.

The idea is to:

• Either remove or convert to comments all <script> tags.
• Insert a single <script> tag that references your amalgamated Javascript.

I've inserted the single js here just before the </body> closing tag, but you can adjust that as required. The source files here are under a directory called 'dirty'; the adjusted files in one called 'clean'.

<property name="single.js" value="single.js" />
<copy todir="clean" overwrite="true">
    <fileset dir="dirty" />
    <filterchain>
        <tokenfilter>
            <replaceregex
             pattern="(&lt;)(\s*SCRIPT\s+SRC=['&quot;][^'&quot;]+['&quot;]\s*)/(&gt;)"
             replace="\1!--\2--\3"
             flags="gi"/>
            <replaceregex
             pattern="(&lt;/BODY&gt;)"
             replace="&lt;SCRIPT SRC=&quot;${single.js}&quot; /&gt;${line.separator}\1"
             flags="i"/>
        </tokenfilter>
    </filterchain>
</copy>

Answer 2

One way to do this is to have the html load just one script, but in development that script is just a "wrapper" of sorts that forces loading of the other individual scripts using the technique listed here. In production, the contents of that script is replaced with the union of all scripts (preferably by some server-side concatenation).