YUI Compressor

Minimalizace kódu je proces, při kterém se odstraní z kódu veškerá vata – komentáře, zbytečné mezery, odsazení atd. Výsledný minimalizovaný kód je menší a rychleji se přenese do prohlížeče. Pro minimalizaci kódu existuje řada nástrojů – některé se soustředí na Javascript, jiné zase umí minimalizovat CSS nebo HTML.

Můj oblíbenec YUI compressor zvládne minimalizovat CSS a Javascript – je naprogramovaný v Javě a spouští se přes příkazovou řádku.

Následující příkaz vytvoří nový soubor sample.min.css, který bude obsahovat minimalizovaný kód ze souboru sample.css:

java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css

Celý proces minimalizace kódu je možné automatizovat prostřednictvím nástroje Apache ANT o kterém jsem psal minule.

Následující sekvence úloh vytvoří ve složce build/wp-content/themes/omdesign minimalizované verze všech CSS souborů, které pro změnu najde ve složce wp-content/themes/omdesign.

<target name="css.minify">
  <mkdir dir="build/wp-content/themes/omdesign" />
  <apply executable="java" parallel="false" verbose="true" failonerror="true" dest="build/wp-content/themes/omdesign">
    <fileset dir="wp-content/themes/omdesign">
      <include name="*.css" />
    </fileset>
    <arg line="-jar"/>
    <arg path="c:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"/>
    <arg line="--line-break 0"/>
    <srcfile/>
    <arg line="-o"/>
    <mapper type="glob" from="*.css" to="*.css"/>
    <targetfile/>
  </apply>
</target>

Je důležité dobře nastavit všechny cesty, jinak se úloha nespustí. Celou sekvenci je možné vylepšit změnou příkazu mapper, díky které budou nové soubory opatřeny o příponu min:

<mapper type="glob" from="*.css" to="*.min.css"/>

Všimněte si, že jednotlivé přepínače jsou zasílány do YUI compressoru pomocí příkazu arg. Na závěr alternativní sekvence pro Javascript:

<target name="js.minify">
  <mkdir dir="build/wp-content/themes/omdesign/js" />
  <apply executable="java" parallel="false" verbose="true" failonerror="true" dest="build/wp-content/themes/omdesign/js">
    <fileset dir="wp-content/themes/omdesign/js">
      <include name="*.js" />
    </fileset>
    <arg line="-jar"/>
    <arg path="c:\Program Files\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar"/>
    <srcfile/>
    <arg value="--charset" />
    <arg value="UTF-8" />
    <arg line="-o"/>
    <mapper type="glob" from="*.js" to="*.js"/>
    <targetfile/>
  </apply>
</target>

Štítek YUI Compressor ×

Apache ANT a YUI Compressor