1 2 … 4 5 6 7 8 … 66 67
6. 8. 2011
6. 8. 2011

Minifikace CSS a JS pomocí YUI compress a Apache ANT – vylepšená verze s makrem

Před časem jsem zde psal o Apache ANT a Yui Compressoru. Přišel jsem na rychlejší a elegantnější způsob, jak minifikovat javascript a CSS soubory. Vše je možné zařídit prostřednictvím Ant makra:

<!-- Minifi css/js with YUI compressor -->
 <macrodef name="Minify" description="Minifi css/js with YUI compressor">
  <attribute name="file" />
  <attribute name="args" default="--charset utf-8 -o '@{file}'"/>
  <sequential>
    <java jar="omPress/tools/yuicompressor.jar" fork="true" failonerror="true" maxmemory="128m">
      <arg line="'@{file}' @{args}" />
    </java>
  </sequential>
</macrodef>

Předdefinované makro, stačí vložit do vašeho Apache Ant projektu a zavolat v libovolném targetu. Jako vstupní parametr vyžaduje makro pouze jméno souboru.

<target name="js.build">
 <Minify file="js/main.js" />
</target>

Pokud makro zavoláte bez nepovinného parametru args, dojde k přepsání originálního souboru minifikovanou verzí (viz hodnota default). Tohle chování je možné samozřejmě snadno změnit:

<target name="js.build">
 <Minify
   file="js/main.js"
   args="--charset utf-8 -o 'js/main.min.js'"
 />
</target>

YUI Compressor zvládne minifikovat také CSS soubory – stačí zavolat:

<target name="css.build">
 <Minify file="css/main.css" />
</target>
#ant, #apache, #build
6. 8. 2011

HTML 5 elementy ve starých IE

Starší verze IE (< IE9) neznají HTML 5 elementy jako jsou například article, aside nebo header. Aby se stránka ve starších IE nerozbila stačí do HTML hlavičky přidat následující javascript:

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

Případně je možné využít podmíněný komentář a vložit skript přímo z repositáře:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ještě samozřejmě přidám odkaz na autora skriptu HTML5 Shine.

Podobných šikovných udělátek existuje několik:

#msie, #webdesign
3. 8. 2011
3. 8. 2011
1 2 … 4 5 6 7 8 … 66 67