[ Published on -
In this post, You can find ANT script that automates some of the main HTML 5 tasks as are versioning, running tests, generating image sprite-sheets, minifying javascripts and css, compressing html, inline scripts and styles and finally making release.
This document is just a simple reference on how to use doT.js JavaScript template engine in browser.
<?xml version="1.0" encoding="UTF-8"?>
<project name="HtmlOzone" default="RELEASE" basedir=".">
<description>Compressing JavaScript and CSS files</description>
<property file="build.properties" />
<dirname property="smartsprites.basedir" file="${ant.file.smartsprites}"/>
<taskdef name="smartsprites" classname="org.carrot2.labs.smartsprites.ant.SmartSpritesTask" />
<taskdef name="yui-compressor" classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask" />
<target name="CREATE PROJECT">
<!-- <mkdir dir="${root.dir}" />
<mkdir dir="${release.dir}" />
<mkdir dir="${tests.dir}" />
<mkdir dir="${results.dir}" />
<mkdir dir="${js.dir}" />
<mkdir dir="${css.dir}" />
<mkdir dir="${img.dir}" />-->
</target>
<!-- Creates project release for production -->
<target name="RELEASE" depends="RUN TESTS, GENERATE SPRITESHEETS, MINIFY">
<echo message="CREATING RELEASE" />
<!-- cleaning release dir -->
<delete dir="${release.dir}"/>
<!-- creating release dir -->
<mkdir dir="${release.dir}" />
<!-- copy only minified js and css files -->
<copy file="${js.dir}/scripts_${build.version}${js.suffix}" todir="${release.dir}/${js.dirName}/" overwrite="true" />
<copy file="${css.dir}/styles_${build.version}${css.suffix}" todir="${release.dir}/${css.dirName}/" overwrite="true" />
<!-- copy all images except images from spr dir -->
<copy todir="${release.dir}/${img.dirName}/" overwrite="true">
<fileset dir="${img.dir}">
<exclude name="**/spr/**" />
</fileset>
</copy>
<!-- copy only spritesheets from spr dir -->
<copy todir="${release.dir}/${img.dirName}/" overwrite="true">
<fileset dir="${img.dir}">
<include name="**spr/*${build.version}.png" />
</fileset>
</copy>
<!-- creating temp dir for storing html files that will be compressed -->
<delete dir="${temp.dir}" />
<mkdir dir="${temp.dir}" />
<copy todir="${temp.dir}" verbose="true">
<fileset dir="${root.dir}" includes="**/*.html" />
</copy>
<!-- replacing all styles with minified css -->
<replaceregexp match="\<!-- styles start --\>(.*?)\<!-- styles end --\>"
replace="\<link rel='stylesheet' href='${css.dirName}/styles_${build.version}${css.suffix}' />" flags="gs">
<fileset dir="${temp.dir}" includes="**/*.html"/>
</replaceregexp>
<!-- replacing all javascripts with minified script -->
<replaceregexp match="\<!-- scripts start --\>(.*?)\<!-- scripts end --\>"
replace="\<script src='${js.dirName}/scripts_${build.version}${js.suffix}'\>\</script\>" flags="gs">
<fileset dir="${temp.dir}" includes="**/*.html"/>
</replaceregexp>
<!-- compressing html files -->
<antcall target="COMPRESS HTML" />
<echo message="---" />
<antcall target="CLEAN GENERATED FILES" />
</target>
<!-- Running javascript tests using jstestdriver -->
<target name="RUN TESTS">
<echo message="RUNNING TESTS" />
<exec executable="java" failonerror="true">
<arg line="-jar"/>
<arg path="${jstestdriver}"/>
<arg line="--port ${jstestdriver.port}"/>
<arg line="--browser ${jstestdriver.browser}"/>
<arg line="--config"/>
<arg path="${jstestdriver.config}"/>
<arg line="--tests all"/>
<arg line="--testOutput"/>
<arg path="${jstestdriver.output}"/>
</exec>
<echo message="---" />
</target>
<!-- Generating image spritesheets -->
<target name="GENERATE SPRITESHEETS" description="Generating image spritesheets">
<echo message="GENERATING SPRITESHEETS" />
<replace dir="${css.dir}" value="${build.version}">
<replacetoken>${build.version}</replacetoken>
</replace>
<smartsprites rootdir="${css.dir}"
documentrootdir="${root.dir}"
outputdir="${css.dir}"
cssfileencoding="${charset}"
cssfilesuffix="${sprite.suffix}"
loglevel="${log.level}"
spritepngdepth="${sprite.png.depth}"
spritepngie6="${sprite.png.ie6}" />
<echo message="---" />
</target>
<!-- Minifying javascript and css files -->
<target name="MINIFY" description="Minifies javascripts and css files">
<echo message="MERGING JAVASCRIPTS" />
<!-- merging javascript files -->
<concat destfile="${js.dir}/${js.concate.file}" force="no">
<fileset dir="${js.dir}" includes="overlay.js" />
<fileset dir="${js.dir}" includes="videoFrame.js" />
</concat>
<echo message="---" />
<!-- compressing merged javascript -->
<echo message="COMPRESSING JAVASCRIPTS" />
<yui-compressor munge="true" jssuffix="${js.suffix}" warn="false" charset="${charset}" fromdir="${js.dir}" todir="${js.dir}" optimize="true">
<include name="${js.concate.file}" />
</yui-compressor>
<echo message="---" />
<!-- merging css files -->
<echo message="MERGING CSS" />
<concat destfile="${css.dir}/${css.concate.file}" force="no">
<fileset dir="${css.dir}" includes="*" />
</concat>
<echo message="---" />
<!-- compressing merged css files -->
<echo message="COMPRESSING CSS" />
<yui-compressor munge="true" csssuffix="${css.suffix}" warn="false" charset="${charset}" fromdir="${css.dir}" todir="${css.dir}" optimize="true">
<include name="${css.concate.file}" />
</yui-compressor>
<echo message="---" />
</target>
<!-- Compressing all HTML files including inline JavaScripts and CSS -->
<target name="COMPRESS HTML">
<apply executable="java" verbose="true">
<fileset dir="${temp.dir}" includes="**/*.html"/>
<arg value="-jar"/>
<arg path="lib/htmlcompressor-1.5.3.jar"/>
<arg line="-t html"/>
<arg line="-r"/>
<!--<arg value="-p"/>-->
<!--<arg path="htmlcompression_rules" />-->
<arg value="--remove-intertag-spaces" />
<arg value="--compress-js" />
<arg value="--compress-css" />
<srcfile/>
<arg value="-o"/>
<mapper type="glob" from="*" to="${basedir}/${release.dir}/*"/>
<targetfile/>
</apply>
<echo message="---" />
</target>
<!-- Cleaning all generated files and values so we have everything clean for next build -->
<target name="CLEAN GENERATED FILES">
<echo message="CLEANING GENERATED FILES" />
<replace dir="${css.dir}" token="${build.version}">
<replacevalue>${build.version}</replacevalue>
</replace>
<delete dir="${css.dir}" includes="**/*-sprite*" verbose="true" />
<delete dir="${css.dir}" includes="**/*${build.version}*" verbose="true" />
<delete dir="${js.dir}" includes="**/*${build.version}*" verbose="true" />
<delete dir="${img.dir}" includes="**/*${build.version}*" verbose="true" />
<delete dir="${temp.dir}" />
</target>
</project>
And here is a property file:
build.version=1.0.0
root.dir = src
lib.dir = lib
release.dir = release
htmlcompress.dir = compressed
temp.dir = temp
charset=UTF-8
js.dirName=js
js.dir=${root.dir}/${js.dirName}
js.concate.file=scripts_${build.version}.js
js.suffix=-min.js
css.dirName=css
css.dir=${root.dir}/${css.dirName}
css.concate.file=styles_${build.version}.css
css.suffix=-min.css
img.dirName=img
img.dir=${root.dir}/${img.dirName}
sprite.png.depth=AUTO
sprite.logLevel=INFO
sprite.suffix=-sprite
sprite.png.ie6
jstestdriver = ${lib.dir}/JsTestDriver-1.3.5.jar
jstestdriver.port = 9876
jstestdriver.browser = "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","C:\\Program Files (x86)\\Opera\\opera.exe","C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe","C:\\Program Files\\Internet Explorer\\iexplore.exe"
jstestdriver.config = conf.yml
jstestdriver.output = results