Jak začít používat npm při tvorbě webu

Návod je psaný pro OS Ubuntu, ale většinu příkazů a nastavení lze odvodit pro jakýkoliv operační systém.

Prošel jsem si pouze zlehka instalováním balíčků a používání Composer, Grunt, Gulp a Bower, ale nějak mě přestalo bavit mít ke každému nástroji nebo aplikaci pro spouštění skriptů zvlášť soubory a nelíbilo se mi mít pro každý nástroj adresář, než jsem objevil, že je možné používat npm, jak pro instalaci balíčků, tak pro spouštění skriptů. Konkrétně jsem potřeboval vyřešit základní problémy, které mám při tvorbě webů:

  • instalaci Bootstrap,
  • kompilaci SASS na CSS,
  • minifikaci a sjednocení CSS souborů do jednoho
  • a minifikaci JS.

Příprava npm

Takže jsem začal jednoduchou instalací:

sudo apt install npm

Zda se instalace zdařila můžete zjistit zadáním příkazu pro zjištění verze.

npm -v

Inicializace projektu

Vytvořte si adresář npm_project1 a v něm inicializujeme npm

cd
mkdir npm_project1
cd npm_project1
npm init

Informace o projektu nechám na vás. Pokud budete mačkat enter, použije se implicitní hodnota, tedy ta co je v kulatých závorkách. Následně se vytvoří soubor package.json, což je hlavní meta-soubor, v kterém jsou obsaženy:

  • základní informace o vašem balíčku / aplikaci, které jste vyplnili při npm init;
  • dependencies – balíčky, které jsou potřeba ke spuštění vaší aplikace;
  • devDependencies – balíčky, které používají programátoři při vývoji této aplikace;
  • scripts – skripty, které se mohou provádět pomocí npm nad aplikací (např. minifikace CSS, kombinace skriptů, …);

Instalace prvního balíčku

Jako první vám představím balíček uglify-js, který slouží k minifikaci / zmenšení JS souborů.

npm install uglify-js

Všimněte si, že se vám vytvořil adresář node_modules, kde se nachází víc podadresářů než jen uglify-js. Je to z toho důvodu, že uglify-js používá nějaké další balíčky, které pro své fungování potřebuje a proto se tyto balíčky nainstalovaly současně s ním.

To je sice fajn, ale je to jen jednorázová záležitost. Pokud chcete, aby aplikaci mohli používat i jiní a nemuseli jste posílat celý adresář node_modules, stačí přidat parametr.

Pokud se jedná o dependencies, použije se parametr -S jako save

npm install balicek -S

v případě, že jde o balíček určený pro vývojáře, tedy devDependencies, což např. uglify-js je, se použije parametr -D jako developer.

npm install uglify-js -D

Více o příkazu npm install.

Módy

Při používání npm se můžete setkat se dvěma módy balíčků a to lokálním a globálním.

Lokální balíčky jsou nainstalovány vždy v adresáři projektu (např. /home/uzivatel/npm_project1/node_modules/).

Globální balíčky jsou nainstalovány v globálním adresáři, který je však ve vlastnictví uživatele root. Tento adresář zjistíte zadáním

npm config get prefix

V mém případě /usr/local. My však chceme umožnit spouštění globálním skriptů z balíčků jako klasický uživatel a ne jen jako uživatel root.

Výhodou globálních balíčků je, že pokud balíček využíváte ve více projektech nemusíte mít fyzicky soubory v každém projektu, ale jen v globálním adresáři.

Globální adresář s balíčky v domovském adresáři

cd
mkdir .node_modules
npm config set prefix=$HOME/.node_modules

Nyní je nastavený nový globální adresář (prefix) pro balíčky. Je však potřeba nainstalovat znovu npm. Použije se parametr pro instalaci do globálního adresáře -g.

cd .node_modules
npm install npm -g

Dalším cílem, kterého jsem chtěl dosáhnout bylo použití skriptů přímo v příkazové řádce – tedy pak i ve vývojovém prostředí.

Integrace skriptů do příkazové řádky

Pokud chcete používat skripty jako běžné příkazy (ls, dir, apod.), tak musíte doplnit cesty pro spuštění. Konkrétně se jedná o konec souboru .profile v domovském adresáři.

cd
nano .profile

a přidat úplně na konec

export PATH="$HOME/.node_modules_global/bin:$PATH"

Proveďte odhlášení a přihlaste se, aby se nová cesta aktualizovala a mohli jste ji používat.

Nyní nainstalujte uglify-js globálně

npm install uglify-js -g

a v příkazové řádce nyní můžete používat příkaz uglify-js.

Závěr

Článek jsem vytvořil pro svou referenci, ale doufám, že pomohl i někomu dalšímu, kdo měl při začátcích problémy nebo nejasnosti.

V dalším článku připravím už konkrétní možnosti spouštění skriptů přes package.json, které využívám.

One thought on “Jak začít používat npm při tvorbě webu

Add yours

Napsat komentář

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑