Jak nastavit minifikování souborů CSS a JS v PHP Stormu

Minifikováním souborů s koncovkou CSS a JS v PHP Stormu

Minifikováním souborů s koncovkou CSS a JS můžeme ušetřit hezkých pár kilobajtů – minifikací se odstraní nadbytečná data (prázdné znaky, konce řádků, komentáře, …) a přitom vše funguje tak, jak má. Tento článek vysvětlí, proč se minifikací má smysl zabývat, a provede krok za krokem aktivací automatické minifikace souborů CSS a JS YUI kompresorem pro program PHP Storm.

Proč minifikovat?

Jak už bylo řečeno, kvůli úspoře dat. Má to ale dnes, v době vysokorychlostního připojení, smysl řešit? Rozhodně ano – důvody jsou vlastně dva:

1. Rychlost načtení webu

Pokud web nebude zobrazen v okamžiku, uživatel může ztratit původní chuť webem dále procházet – asi byste nechtěli do restaurace, kde by vás nechali hodinu čekat u vchodu. A pokud se návštěvník Vašeho webu připojuje přes pomalejší připojení, bude za každý kilobajt, který nemusí stahovat, vděčný. Asi je jasné, že pokud se načte web rychle, je to pro návštěvníka dobře.

2. Vliv na SEO

Není tajemstvím, že jeden z faktorů, který ovlivňuje umisťování a oblíbenost webu pro vyhledávač Google, je právě rychlost jeho načtení. Z hlediska SEO je tedy vždy výhodné mít web datově
optimalizovaný a kilobajty si hlídat. Ale dost řečí, jdeme instalovat!

Instalace – krok za krokem

1. Instalace pluginu

Otevřete si nastavení (File – Settings) a z levé nabídkové části zvolte položku Plugins (pro zefektivnění stačí do vyhledávacího pole nahoře začít psát „plug…“. Ve spodní části pak hledejte tlačítko Install JetBrains plugin. V nově otevřeném okně v jeho horní části dejte vyhledat plugin NodeJS, na ten najeďte myší a pravým tlačítkem z kontextového menu zvolte Download and Install.
Po instalaci tlačítkem Close zavřeme pluginové okno, stiskneme tlačítko Apply a necháme PHP Storm restartovat.

Instalace NodeJS pluginu

Instalace NodeJS pluginu

2. Instalace NodeJS

Nejprve je potřeba stáhnout program NodeJS (který v sobě obsahuje YUI kompresor) z webové stránky https://nodejs.org/en/download/. Při instalaci si můžete zvolit, co všechno chcete instalovat a kam. Doporučuji označit (kromě online dokumentace) vše a nechat program nainstalovat se tam, kam chce, tedy do složky nodejs v Program Files.

Instalace NodeJS

Instalace NodeJS

3. Aktivace YUI kompresoru

Do složky, kam jste NodeJS nainstalovali, se nyní dostaňte přes Total Commander (nebo přes příkazovou řádku) a vepište aktivační příkaz:

npm install yuicompressor

4. Aktivace YUI kompresoru File Watcherem

Otevřete si nastavení pro File Watcher (File – Settings) a opět začněte psát „File…“. Položka File Watchers bude pravděpodobně prázdná, je nutné YUI Compressor pro CSS přidat tlačítkem +. V nově otevřeném okně, na řádce Program by měla být cesta k souboru yuicompressor.jar. Pokud jste nechali původní cestu instalaci, budete soubor mít umístěn v:

C:\Program Files\Nodejs\node_modules\yuicompressor\build\yuicompressor-x.x.x.jar

Pokud cesta k souboru nesměruje správně nebo chybí úplně, tlačítkem […] ji dohledejte. Stejný postup zvolíme i při instalaci JS kompresoru a opět dohledáme cestu k souboru yuicompressor.jar (PHP Storm by si měl cestu již pamatovat). Tlačítkem Apply vše potvrdíte.

Výběr umístění YUI kompresoru

Výběr umístění YUI kompresoru

Nyní se při každém uložení souboru s příponou CSS a JS udělá jeho minifikovaná verze (k názvu souboru se připojí automaticky .min), se kterou můžete dál pracovat. Nezapomeňte, že je potřeba z hlavičky Vašeho webu na nové minifikováné soubory nasměrovat.