Integrating js in build process

Question

I'm wondering what the best way to minify and concatenate all my js scripts in one in a build process is. I've got the actual minifying working, but now need to set a reference in my html page to the minified file. In the dev version it has references to five files which get concatenated. Should I juts xmlpoke or something like that? Are there more elegant techniques?

Answer 1

the way i usally do it is concat all the files together, minify using yui:

<target name="compress-js" unless="disable.js.compression">
    <java fork="true" spawn="true" jar="tools/yuicompressor-2.3.6/yuicompressor-2.3.6.jar">
      <arg value="-o" />
      <arg value="${js.home}/lib/lib.js" />
      <arg value="${js.home}/lib/lib.js" />
    </java>
  </target>

and then just have one header that references the compressed file, and used disable.js.compression in dev so that your files dont get compressed.

Answer 2

In your file which includes the script files, do this (using which ever server side technology you use)

<%
if (@IS_DEV@){
%>
  <script src="file1"></script>
  ...
  <script src="file5"></script>    
<%
} else {
%>
  <script src="@MINIFIED_FILE_PATH@"></script>
<%
}
%>

Then use the "replace" ant target in your build file (assuming you use ant) to replace @IS_DEV@ and @MINIFIED_FILE_PATH@

<replace file="yourfile.jsp" token="@IS_DEV@" value="${IS_DEV}"/>
<replace file="yourfile.jsp" token="@MINIFIED_FILE_PATH@" value="${YOUR_MINIFIED_FILE_PATH}"/>