nav line

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:

install coffee-script

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

global install coffee-script

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

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

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ů.

Ohodnoťte článek

Automatizace frontendových úkonů  - část 1.

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících