Saturday, January 26, 2008

Predstavenie YUI-Compressor Ant task

English version of this post can be found here.

YUI-Compressor je nástroj na minifikovanie JavaScriptového kódu. Minifikácia je proces, pri ktorom sa z JS odstránia všetky nepotrebné biele znaky, pri čom význam kódu pre browser (alebo iný interpreter) zostane rovnaký. Takýmto spôsobom sa dá ušetriť veľa prenášaných dát, často okolo 40 a viac percent. Mohlo by sa zdať že pri dnešných broadband pripojeniach je zbytočné šetriť prenášané dáta, ale nie je :-) Veľkosť web 2.0 JS frameworkov sa už počíta v stovkách kB, často i v MB.

Pre jednoduchšie použitie v antovských buildoch som napísal antovský task. Úspešne som ho využil v jednom projekte na ktorom som pracoval, a zatiaľ všetko funguje v poriadku ;-)

Inštalácia

Použitie v buildfile

Najprv treba nastaviť cesty a classpath:

/* ${libs} je cesta ku vsetkym stiahnutym jarkam */
<property
name="yui-compressor.jar"
location="${libs}/yuicompressor-2.1.2.jar" />
<property
name="yui-compressor-ant-task.jar"
location="${libs}/yui-compressor-ant-task-0.2-alpha1.jar" />

<path id="task.classpath">
<pathelement location="${yui-compressor.jar}" />
<pathelement location="${yui-compressor-ant-task.jar}" />
</path>


Definovať nový task:

/* definovanie noveho tasku */
<taskdef
name="yui-compressor"
classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask">

<classpath refid="task.classpath">
</taskdef>


Pred minifikáciou zbaliť všetky JS súbory do jedného (optional):

/* concatenation */
<echo message="Building ${my-ajax-lib.file}" />
<concat destfile="${my-ajax-lib.file}" force="no">

<!-- Order in which these files are concatenated _IS_ IMPORTANT! -->

<!-- AJAX related tools -->
<fileset dir="${src.dir}" includes="**/ajax/utils.js" />
<fileset dir="${src.dir}" includes="**/ajax/request.js" />
</concat>


A nakoniec zavolať compressor:

/* volanie compressora */
<yui-compressor
warn="false"
munge="true"
suffix=".js"
preserveallsemicolons="false"
fromdir="${output.build.dir}"
todir="${output.dist.dir}">

<include name="${my-ajax-lib.file}" />
</yui-compressor>


Budúcnosť

YUI-Compressor dokáže minifikovať aj CSS súbory. Táto funkcionalita je už vo verzii 0.2-alpha1 tiež zahrnutá, chce to ale ešte trochu doladiť. Po dokončení tejto funkcionality by som rád napísal trochu dokumentácie, nejaký tutoriál a zopár príkladov.

Všetok kód je pod otvorenou licenciou na googlecode, takže vám nič nebráni začať hackovať a vylepšovať ho, veľmi rád prijmem akúkoľvek pomoc.

No comments: