Spojování a komprimace JS/CSS v jNP

Řešený problém

Chceme seznam Javascriptů nebo seznam CSS zkomprimovat a spojit do jednoho souboru. Ušetříme tak datovou velikost HTTP požadavků i jejich počet.

Pro spojování javascriptů či CSS si vystačíme s možnostmi, které nám poskytuje jádro systému jNetPublish. Pro komprimaci využijeme knihovnu JNP_MINIFY, proto požádejte maintainera vaší instance o její přidání.

Debug mód

Spojené a komprimované javascripty a CSS využijeme primárně v publikované prezentaci; pro vývoj se to však nehodí, proto si zavedeme tzv. debug mód, který budeme aktivovat dvěma alternativními způsoby:

Parametr debug=1 v URL - hodí se pro jednorázové kontroly a hledání chyb na jedné stránce
Cookie debug s hodnotou 1 hodí se hlavně pro vývoj, debug mód je tak aktivován po celou dobu existence cookie

Resource sekce

Pro účely debug módu budeme potřebovat dvě samostatné sekce (připojené ke konfiguraci aktuální prezentace, aby byly dostupné ze všech šablon) pro linkování JS/CSS. Debug sekce musí mít vypnutou možnost Generovat staticky.

Nastavení globálních proměnných

Pro snažší přistup k informaci o debug módu a použité resources sekci si v hlavní šabloně nastavíme globální proměnné:

Informaci o debug módu budeme využívat dále.

Typy assetů

Skript – statické JS/CSS

Pro statické Javascripty či CSS (tj. ty, ve kterých nepotřebujeme TFS) použijeme asset typu Skript, který se o komprimaci obsahu stará sám. Vyplníme atributy:

Titulek	pro lepší identifikaci
Soubor (nebo Textový soubor)	obsah Javascriptu/CSS
Jméno	název souboru po zalinkování (např. carousel.js)
Typ	Mimetype souboru, text/javascript nebo text/css
Kódování souboru	utf-8
Vypnout minifikaci	hodí se pro soubory, které již zkomprimovány jsou (jquery-min.js apod.)

Šablona – dynamické JS/CSS

Pro komprimaci dynamického Javascriptu či CSS musíme využít tzv. minifikační rouru, kterou obalíme obsah, který chceme zkomprimovat (obvykle celou šablonu).

Vytvoříme asset typu Roura, nastavíme jí ovládací třídu (záložka Ovládací třídy) com.etnetera.jnp.minify.pipe.MinifyingPipe a připojíme jí jako referenci minify_pipe na asset Konfigurace prezentace daného projektu (aby tato reference byla dostupná všude).

Rouru pak v šabloně použijeme pomocí příkazu pipe, kterému předáme referenci na minifikační rouru a nastavíme správný Mimetype obsahu (text/javascript nebo text/css).

Spojování JS/CSS

Výčtový zdroj položek

Na spojení využijeme možnosti assetu typu Výčtový zdroj položek. Do zdroje jednoduše připojíme všechny Javascripty (Skripty nebo Šablony), nebo všechny CSS (Skripty nebo Šablony) v pořadí, jak je chceme mít ve spojeném souboru.

Kniha

Pro spojení CSS se často více hodí asset typu Kniha, který nám umožní spojit i CSS soubory pro různá media. Jednotlivá media nastavíme jako kapitoly knihy.

Linkování JS/CSS

Pro linkování JS/CSS již nebudeme používat reference na jednotlivé assety, ale použijeme reference na spojené soubory (výčtové zdroje).

V případě aktivního debug módu zdroje procyklíme a jednotlivé soubory zpracujeme formátovačem (režimy debug_js a debug_css).

V případe neaktivního debug módu do Resources sekce zalinkujeme přímo spojený soubor, kterého obsah se pak vypíše šablonou pro Resources (často nazývaná passThru) a pravidly Formátovače pro zdroje s formátem js a css.

Linkování JS

Linkování CSS

Formátovač

Výčtový zdroj položek, formát: js

Výčtový zdroj položek, formát: css

Toto pravidlo je společné i pro asset Kniha.

Výčtový zdroj položek, režim: debug_js

Výčtový zdroj položek, režim: debug_css