javascriptの縮小化

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

フロントエンドでの高速化を実現する14のルールが紹介された本。大分前に買っていていたんですがやっと読み終わりました。とは言ってもただ読んで無かっただけ。。150Pくらいなので非常に薄く読みやすいです。14のルールのうち「ルール8：JavaScriptとCSSは外部ファイル化する」と「ルール10：JavaScriptを縮小化する」をAntを使って手順の自動化を実現してみました。手順をまとめると次のようになります。

1. インライン化されているJavaScriptを外部ファイルにまとめる
2. JavaScriptファイル群を1つにまとめる
3. 最後に圧縮する

とはいえ、1の手順は自動化できないので手動でまとめます。自動化するのは2番と3番の手順。
2番目の手順にはgroovyを使って1つのファイルにマージします。本当はAntタスクで実現できればよかったんですが、いいのが見つかりませんでした。「js」という名前のディレクトリに「a.js」「b.js」「c.js」といったような複数のjsファイルが存在している場合にこれらをまとめて1つのファイル「merge.js」を作成します。
3番目の手順にはYUI Compressorを使用します。YUI Compressorはjavaで作られているのでAntと相性がいいんです。libフォルダにyuicompressor-2.3.6.jarを配置しておきましょう。ちなみにYUI Compressorの使い方はこのようにします。

$java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

では最後にbuild.xmlです。

<?xml version="1.0" encoding="UTF-8" ?>

<project name="antsample">
	<property name="js.dir" value="js" />
	<property name="js.file" value="${js.dir}/merge.js" />
	<property name="js.min.file" value="${js.dir}/merge-min.js" />
	
	<path id="build.classpath">
		<fileset dir="lib" includes="*.jar" />
	</path>

	<taskdef name="groovy" classname="org.codehaus.groovy.ant.Groovy" classpathref="build.classpath" />

	<target name="compress">
		<delete file="${js.file}" />
		
		<groovy>
			targetFile = new File(properties['js.file'])

			new File(properties['js.dir']).eachFile{
				targetFile.append(it.text)
			}
		</groovy>

		<java jar="lib/yuicompressor-2.3.6.jar" fork="true">
			<arg line="${js.file} -o ${js.min.file}" />
		</java>
	</target>

</project>