Geek Answers Handbook

Combining JS and CSS files as part of an assembly

I want to combine all my JS files into reduce the number of HTTP requests that the browser makes when it goes to my site. Of course, it is still important to keep these files separate during development. A widespread solution is to concatenate as part of an assembly.

The concatenation part is pretty simple .. but what about all the HTML files that still contain a bunch of tags <script src="*.js">that reference pre-concatenated js files? Now they should point to a single merged javascript file.

How can I replace these links as part of the assembly?

+5
source share
6 answers

Ant . , "" HTML .

:

  • <script>.
  • <script>, Javascript.

js </body>, . ""; "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>

+4

, html script, , script "", , . script ( ).

+1

JS html, , JS JS . HTTP- . , JS, , , .

+1

wro4j, ( maven) ( ) , :

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

, html:

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


<script src="all.js">

: , .

+1

Google, minify: http://code.google.com/p/minify/, , , , .

0

modconcat, apache. .

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>
0
source

More articles:


All Articles