Stanislav Zorjan - Stasha - Full Stack Software Engineer and Game Development Hobbyist - Prague


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="\&lt;!-- styles start --\&gt;(.*?)\&lt;!-- styles end --\&gt;" 
					   replace="\&lt;link rel='stylesheet' href='${css.dirName}/styles_${build.version}${css.suffix}' /&gt;" flags="gs">
			<fileset dir="${temp.dir}" includes="**/*.html"/>
		</replaceregexp>
		
		<!-- replacing all javascripts with minified script -->
		<replaceregexp match="\&lt;!-- scripts start --\&gt;(.*?)\&lt;!-- scripts end --\&gt;" 
					   replace="\&lt;script src='${js.dirName}/scripts_${build.version}${js.suffix}'\&gt;\&lt;/script\&gt;" 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