JS a CSS Minifier v PHP

Chcel by som vám všetkým predstaviť malý projekt, ktorý som chcel napísať už dávno, ale rozhodol som sa pre to až teraz. Projekt, ktorý som už dávno potreboval, ale nikdy som nenašiel tú správnu knižnicu - Minifier.

Hlavná prednosť tejto knižnice je jasná na prvý pohľad - veľkosť. So 150 riadky kódu má veľkosť necelých 5.5 kB a je zmrštená do jedného súboru, takže vám naozaj prekážať nebude.

Čo vlastne robím?

Knižnica slúži na zmršťovanie často obrích štýlov a skriptov len do dvoch súborov, čím sa značne zredukuje čas potrebný na načítanie stránky. Tieto súbory tiež minifikuje, čím z nich odstráni nepotrebné biele znaky a komentáre.

Knižnica bola inšpirovaná zmačkátorem, ktorý mal síce výborný potenciál, ale veľa múch.

Ale prejdime už k veci.

Začíname

Minifier vsádza na jednoduchosť a ľahkosť, preto ani jeho použitie nie je nijako zložité. Stačí si ho len stiahnuť (z GitHub alebo z prílohy k tomuto článku) a načítať do skriptu:

require_once "Minifier.php";

Potom si ešte v rovnakej zložke s Minifierem vytvorte zložku s názvom cache a máme hotovo! Teraz môžeme začať minifikovat!

Metódy

Názov	parametre	popis
add	source (String, Array), type (String "css" or "js"; optional)	pridáva súbory, ktoré budú minifikovány
render	minify (Boolean; default true; optional), version (String; optional)	fyzicky ukladá minifikované súbory, vracia html tagy na nahrávanie
clear	-	maže všetky súbory v priečinku cache

Ukážky

Po načítaní Minifier u si vytvoríme jeho novú inštanciu a tú si uložíme do premennej.

$minifier = new Minifier();

Jednoduché skripty a štýly

Skripty a štýly môžeme pridávať buď samostatne alebo v poli:

$minifier->add(array(
    "index.js",
    "index.css"
));
$minifier->add("cookies.js");
$minifier->add("tables.css");

Externé súbory

Minifier podporuje aj externé knižnice. Ako som povedal na začiatku, je teda možné načítať naozaj iba dva súbory.

$minifier->add(array(
    "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js",        // jQuery
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",   // Bootstrap
));

Komplikované názvy súborov

Vo väčšine prípadov Minifier vie odhadnúť typ súboru, ak ale načítate súbor s nejakými parametrami, je nutné jeho typ určiť ručne. Možno tak dosiahnuť pomocou druhého parametra. Druhý parameter sa hodí predovšetkým u fontov, kde typ súboru nemožno poznať podľa prípony.

$minifier->add("https://fonts.googleapis.com/css?family=Open+Sans", "css");

Prechádzanie zložiek

Veľkou prednosťou Minifier u je možnosť jednoducho načítať všetky súbory v jednej zložke. Možno to dosiahnuť pomocou jednoduchého cyklu.

$files = glob('styles/*');
foreach($files as $file){
    if(is_file($file))
        $minifier->add($file);
}

Príkladom vyššie sa načítajú všetky súbory v priečinku styles. Dajte si však pozor, aby v prechádzané zložkách boli naozaj len CSS alebo JS súbory.

Vyrenderované

Akonáhle budete mať všetky súbory pridané, zostáva je už len vyrenderovať. To urobíte tak, že v hlavičke dokumentu zavoláte metódu render ().

$minifier->render();

Výstup metódy nie ech ujte, všetko si vypíše sama.

Táto metóda má dva voliteľné parametre - minifikovat a verzia. Prvým určíte, ak si želáte súbory okrem zlúčenie aj zminifikovat (defaultne true), druhým môžete súbory pomenovať podľa verzie. Obom súborom sa do názvu pridá prípona s verziou, napr. script-0.1.6.js

$minifier->render(false, "0.0.1");  // soubory se nebudou minifikovat a dostanou příponu -0.0.1

Prečistenie

Ak máte v priečinku cache veľa rôznych verzií súborov, môžete ju jednoducho prečistiť pomocou metódy clear ().

$minifier->clear();

Dajte si ale pozor - ak cache vyčistíte až po renderovanie, nebudú už renderované súbory k dispozícii!

Záver

To je asi tak všetko. Pokiaľ chcete svojim návštevníkom urýchliť prehliadanie vášho webu, dajte mi šancu. Som stvorený od toho, aby som bol ľahký.

Napíšte mi prosím do komentárov, čo si o Minifier u myslíte, a či má cenu pokračovať vo tvorbe podobných ľahkých knižníc.

Galéria