Článek původně vyšel na autorově webu Vzhůru dolů.

Tohle je začátečníkův průvodce instalací Node.js ekosystému. Ten se hodí prakticky každému frontendistovi – javascriptovým programátorům i UI vývojářům. Potřebujete hlavně Node.js a javascriptový balíčkovač NPM.

Na to navazuje frontend balíčkovač Bower, sestavovač Grunt a jeho pluginy. Grunt, Bower a NPM jsou jen začátek, časem si můžete oblíbit automatizátor Yeoman a další nástroje jako Gulp nebo WebPack.

Budeme pracovat s příkazovou řádkou, takže se hodí znát její základy – Windows a Linux & Mac.

Node.js a NPM

NPM je balíčkovací systém Node.js – musíte stáhnout a nainstalovat celé Node.

Jste na Windows? Úplně nejdřív tohle

1. Hodí se nainstalovat Visual Studio Express, které ulehčí chod některých Node balíčků.
2. Nainstalovat Git do příkazové řádky. V kroku „Adjusting your PATH environment“ vybrat „Run Git from the Windows Command Prompt“.

A teď všichni, bez ohledu na platformu. Globálně nainstalujeme Node.js. Všechny způsoby jsou tady: nodejs.org/en/download/

Jestli vše funguje, zjistíte příkazem pro zobrazení verze NPM:

npm -v

Všechny ostatní potvůrky se pak instalují jako Node balíčky.

Na Macu se občas radí všechny NPM příkazy spouštět jako administrátor (sudo npm …). To je není dobré z hlediska bezpečnosti. Raději si aktuálnímu uživateli přidejte práva k zápisu do usr/local:

sudo chown -R $USER /usr/local

Konec bezpečnostní odbočky. Pojďme instalovat užitečné balíčky.

Grunt, Bower a další Node balíčky

Budete používat sestavovač Grunt? V příkazové řádce potřebujete globálně nainstalovat balíček grunt-cli:

npm install -g grunt-cli 

A co frontend balíčkovač Bower? To už je jednoduché. Opět jej nainstalujeme globálně:

npm install -g bower 

Úplně stejným způsobem si pak můžete nainstalovat Grunt pluginy, alternativní sestavovač Gulp nebo třeba Webpack.

Grunt pluginy

npm install <nazev-pluginu> --save-dev

Všimněte si, že už neinstalujeme globálně – bez přepínače -g. Ano, Grunt pluginy nebo třeba Bower balíčky instalujeme ke konkrétnímu projektu. Zároveň je chceme uložit do konfiguráků balíčkovacího systému (packages.json).

Jste na Windows? Pak pozor, některé Grunt pluginy vyžadují poněkud speciálnější péči. Vím o PhantomJS, na kterém závisí třeba plugin pro generování kritického CSS (grunt-criticalcss) nebo ImageMagick, na které zase potřebují pluginy pro práci s obrázky jako grunt-contrib-imagemin.

Bower balíčky

bower install <nazev-pluginu> --save

--save-dev přepínač uloží plugin do vývojářských závislostí. U začátečníků se používá hlavně v souvislosti s Gruntem a jeho pluginy. Ty instalujeme pomocí NPM.

Pokud bychom instalovali jQuery, půjde o uživatelskou závislost. Použijeme --save přepínač. Pro takové závislosti se více hodí Bower.

Tahák pro práci s balíčkovacími systémy

Bower i NPM mají naštěstí podobné příkazy:

# Vyhledávání balíčku v centrálním repozitáři:
npm/bower search jquery-ui

# Zobrazit detaily o balíčku:
npm view jquery-ui
bower info jquery-ui

# Instalace všech balíčků projektu:
npm/bower install 
# Instalace balíčku a přidání do uživatelských závislostí:
npm/bower install jquery-ui --save
# Instalace balíčku a přidání do vývojářských závislostí:
npm/bower install jquery-ui --save-dev
# Instalace specifické verze balíčku:
npm/bower install jquery-ui@1.11.x

# Aktualizace všech balíčků:
npm/bower update

# Výpis stromu závislostí:
npm/bower list
# Výpis stromu závislostí a verze konkrétního balíčku:
npm/bower list jquery-ui

# Odstranění balíčku:
npm/bower uninstall jquery-ui

# Smazání cache. Hodí se v případě reinstalace sady balíčků:
npm cache clean

# Zobrazení balíčků co je potřeba aktualizovat:
npm outdated
bower list

# Nápověda:
npm help

Vyzkoušejte si to

Nainstalováno? Pokud nemáte nic lepšího po ruce, vezměte příklad ze školení Dnešní webový frontend a postupujte podle návodu.