JS a CSS Minifier v PHP

Chtěl bych vám všem představit malý projekt, který jsem chtěl napsat již dávno, ale rozhodl jsem se pro to až teď. Projekt, který jsem už dávno potřeboval, ale nikdy jsem nenašel tu správnou knihovnu - Minifier.

Hlavní přednost této knihovny je jasná na první pohled - velikost. Se 150 řádky kódu má velikost necelých 5.5 kB a je smrštěna do jednoho souboru, takže vám opravdu překážet nebude.

Co vlastně dělám?

Knihovna slouží ke smršťování často obřích stylů a skriptů pouze do dvou souborů, čímž se značně zredukuje čas potřebný k načtení stránky. Tyto soubory také minifikuje, čímž z nich odstraní nepotřebné bílé znaky a komentáře.

Knihovna byla inspirována zmačkátorem, který měl sice výborný potenciál, nýbrž spoustu much.

Ale přejděme již k věci.

Začínáme

Minifier sází na jednoduchost a lehkost, proto ani jeho použití není nijak složité. Stačí si jej pouze stáhnout (z GitHubu nebo z přílohy tohoto článku) a načíst do skriptu:

require_once "Minifier.php";

Poté si ještě ve stejné složce s Minifierem vytvořte složku s názvem cache a máme hotovo! Nyní můžeme začít minifikovat!

Metody

Název	Parametry	Popis
add	source (String, Array), type (String "css" or "js"; optional)	přidává soubory, které budou minifikovány
render	minify (Boolean; default true; optional), version (String; optional)	fyzicky ukládá minifikované soubory, vrací HTMl tagy s načtenými soubory
clear	-	maže všechny soubory ve složce cache

Ukázky

Po načtení Minifieru si vytvoříme jeho novou instanci a tu si uložíme do proměnné.

$minifier = new Minifier();

Jednoduché skripty a styly

Skripty a styly můžeme přidávat buďto samostatně nebo v poli:

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

Externí soubory

Minifier podporuje i externí knihovny. Jak jsem řekl na začátku, je tedy možné načítat opravdu pouze dva soubory.

$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 souborů

Ve většině případů Minifier umí odhadnout typ souboru, pokud ale načítáte soubor s nějakými parametry, je nutné jeho typ určit ručně. Lze tak dosáhnout pomocí druhého parametru. Druhý parametr se hodí především u fontů, kde typ souboru nelze poznat podle přípony.

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

Procházení složek

Velkou předností Minifieru je možnost jednoduše načíst všechny soubory v jedné složce. Lze toho dosáhnout pomocí jednoduchého cyklu.

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

Příkladem výše se načtou všechny soubory ve složce styles. Dejte si ovšem pozor, aby v procházených složkách byly opravdu pouze CSS nebo JS soubory.

Vyrenderování

Jakmile budete mít všechny soubory přidány, zbývá je již jen vyrenderovat. To uděláte tak, že v hlavičce dokumentu zavoláte metodu render().

$minifier->render();

Výstup metody neechujte, vše si vypíše sama.

Tato metoda má dva volitelné parametry - minifikovat a verze. Prvním určíte, přejete-li si soubory kromě sloučení i zminifikovat (defaultně true), druhým můžete soubory pojmenovat podle verze. Oběma souborům se do názvu přidá přípona s verzí, např. script-0.1.6.js

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

Pročištění

Pokud máte ve složce cache spoustu různých verzí souborů, můžete ji jednoduše pročistit pomocí metody clear().

$minifier->clear();

Dejte si ale pozor - pokud cache vyčistíte až po renderování, nebudou už renderované soubory k dispozici!

Závěr

To je asi tak vše. Pokud chcete svým návštěvníkům urychlit prohlížení vašeho webu, dejte mi šanci. Jsem stvořen od toho, abych byl lehký.

Napište mi prosím do komentářů, co si o Minifieru myslíte, a zda má cenu pokračovat ve tvorbě podobných lehkých knihoven.

Galerie

Program byl vytvořen v roce 2016.