Automatizace frontendových úkonů - část 1.
Při práci na frontendu u webintegračního projektu je mnoho opakujících se nebo ne zcela záživných úkonů. V tomto a následujících článcích si ukážeme několik velmi užitečných nástrojů, které významným způsobem ulehčí a urychlí práci. Než začneme s jednotlivými nástoji, jako jsou Bower, Grun, Gulp a Yeoman, povíme si něco o tom, na čem jsou tyto nástroje založeny.
Na začátek je nutné podotknout, že Bower, Grunt, Gulp i Yeoman jsou moduly pro Node.js a podrobněji se k nim vrátíme v následujícím článku. Node.js je výkonné, událostmi řízené prostředí pro Javascript a je postaveno na javascriptovém interpretu V8 od společnosti Google, který se používá v prohlížeči Google Chrome. Tyto nástroje tedy nainstalujeme pomocí npm (node package manager), což je výchozí balíčkovací systém pro Node.js.
Node.js a npm
Node.js je tedy „evented I/O framework for the V8 JavaScript engine“, což lze volně přeložit jako engine V8, který je obohacen o funkce umožňující skriptům přistup k souborům nebo síťovým funkcím. To tedy znamená, že můžeme vytvořit server naslouchající na určeném portu téměř stejným způsobem, jakým vytváříme například obslužné metody pro události v prohlížeči.
Npm (node package manager) je balíčkovací systém pro Node.js a instaluje se společně s Node.js. V Node.js se moduly (balíčky) instalují obdobně jako např. programy v Linuxu přes APT. Moduly lze procházet na webu npmjs.org.
Je nutné doplnit, že pro provozování většiny těchto nástrojů se musíte aspoň částečně „kamarádit“ s příkazovým řádkem, protože právě pomocí příkazového řádku se tyto nástroje ovládají/instalují. I když pro část z nich existují alternativy, o kterých si řekneme v závěru.
S npm tedy pracujeme přes klasický příkazový řádek a všechny moduly se instalují jednoduchým příkazem npm install, takže chceme-li nainstalovat např. modul coffee-script, nainstalujeme jej takto:
npm install coffee-script
Instalace pak bude vypadat zhruba takto:
V adresáři s projektem vznikl adresář s názvem node_modules, ve kterém jsou lokálně nainstalovány moduly, které daný projekt využívá. Pokud chceme nainstalovat nějaký modul globálně, použijeme parametr -g. Pak lze modul využívat ve více projektech.
npm install coffee-script -g
Jak je v příkladu výše viditelné, tak se kromě samotného modulu coffee-script nainstaloval ještě modul mkdirp, na kterém je tento modul závislý.
Při instalaci se můžeme odkazovat přímo na modul z npm registru, lze ale instalovat i moduly z Githubu, lokální moduly, moduly dostupné na určité URL, atd. Npm toho nabízí ale mnohem více, jak lze vidět v dokumentaci projektu.
package.json
Podíváte-li se do nějakého projektu nebo modulu, tak v něm pravděpodobně naleznete soubor package.json. Ten obsahuje základní informace o projektu, jako je název, verze, popis závislostí na jiných modulech (včetně verze), atd. A právě pomocí tohoto souboru dochází k vlastní instalaci daného modulu a jeho závislostí. Zadáme-li v projektu příkaz npm install, tak npm stáhne všechny závislosti do složky node_modules, a pokud má nějaký modul další závislosti, tak stáhne i je, atd.
Pro vytvoření nového projektu (package.json) použijeme příkaz:
npm init
Což nám po krátkém dotazníku v projektu vytvoří soubor package.json, který daný projekt popisuje a jehož obsah je vidět na obrázku výše. Instalace modulů do projektu pak probíhá pomocí příkazu npm install --save, jak nám také radí nápověda při vytváření projektu.
Instalaci modulu coffee-script přímo do našeho projektu tedy provedena takto:
npm install coffee-script --save
A odpovídající package.json:
{
"name": "my-project",
"version": "0.0.0",
"description": "my description",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\"
&& exit 1"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/my-project"
},
"author": "",
"license": "BSD-2-Clause",
"dependencies": {
"coffee-script": "~1.8.0"
}
}
Je vidět, jak se do sekce dependencies přidal modul coffee-script. Takto je projekt připraven pro sdílení např. v týmu, kdy si ostatní členové pomocí npm install jen doinstalují všechny moduly, které projekt využívá.
Závěr
Krátce jsme si popsali, na čem jsou založeny nástroje, ke kterým se dostaneme v další části tohoto článku, a ukázali si základní principy, které všechny moduly postavené na Node.js a npm využívají. V další části se již dostaneme ke konkrétním nástrojům, které dokážou zásadním způsobem ulehčit práci na webintegračním projektu. Představíme si Bower - jednoduchý balíčkovací systém pro frontendové komponenty, Grunt a Gulp – roboty automatizující úkoly na frontendu a Yeoman – scaffoldingový nástroj pro generováním celých projektů.
