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?

martin clayton · Accepted Answer · 2011-09-16 06:15:10Z

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>

Jonathan M · Accepted Answer · 2011-09-15 20:56:20Z

1

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).

answered Sep 15, 2011 at 20:56

Jonathan M

17.5k9 gold badges61 silver badges95 bronze badges

Comments

Chris Pont · Accepted Answer · 2011-09-15 20:56:45Z

1

Depending on the technology you're using, you could have one JS reference in your html, to a handler which concatenates all of the JS files in a directory into one JS file. Then you can easily manage the individual files during development with the benefit of one HTTP request at runtime. There's plugins out there that will compress the JS, remove whitespace and cache the results, but again, depends on your technology.

answered Sep 15, 2011 at 20:56

Chris Pont

7916 silver badges14 bronze badges

Comments

Alex Objelean · Accepted Answer · 2011-09-16 07:43:57Z

1

There is a library called wro4j which can be used as a build time solution (maven plugin) or a run-time solution (filter) and helps you to keep all your resources described in a single location as simple as:

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>

This way, you can switch all resource references in html from:

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
...
<script src="script99.js">

to

<script src="all.js">

Disclaimer: This is a biased answer, since I'm working on this project.

answered Sep 16, 2011 at 7:43

Alex Objelean

4,1632 gold badges29 silver badges37 bronze badges

Comments

endyourif · Accepted Answer · 2011-09-15 20:54:54Z

0

There is a Google project called minify: http://code.google.com/p/minify/ that will probably be exactly what you're looking for.

answered Sep 15, 2011 at 20:54

endyourif

2,20220 silver badges33 bronze badges

Comments

Sanghyun Lee · Accepted Answer · 2011-09-16 02:10:52Z

0

You could use modconcat which is apache plugin. It helps to concatenate files easily like this.

From:

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

    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/css/forms.css" type="text/css" media="screen" />
</head>

To:

<head>
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" />
</head>

answered Sep 16, 2011 at 2:10

Sanghyun Lee

23.4k19 gold badges107 silver badges127 bronze badges

Collectives™ on Stack Overflow

Combining JS and CSS files as part of build

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related