Martin Michálek Martin Michálek  – 21. 11. 2018

Node.js, serverový javascript, přinesl díky nástrojům pro příkazovou řádku možnost efektivně pracovat i nám frontendistům a frontendistkám.

Tenhle rozcestník se tedy soustředí na nástroje pro automatizaci. Tam, kde to jde, dávám přednost češtině. Samozřejmě, že vždycky to nejde.

Proč to vlastně všechno potřebujete?

  • Protože si velmi usnadníte práci. Výstupem je totiž automatizace procesů vývojáře, např. minifikace JS souborů nebo převod z preprocesoru do čistého CSS.
  • Protože vše sdílíte v týmu: Konfiguraci závislostí projektu, nastavení sestavovačů nebo spouštěčů…

Node.js a balíčkovače

Základní stavební kameny: Node.js a nástroje pro správu frontendových balíčků (NPM, Yarn).

  • Úvod do příkazové řádky [Zdroj: Nauč se Python]
    Terminál je věc, kterou je potřeba umět alespoň trochu ovládat.
  • Úvod do Node.js [ITNetwork.cz]
    Co to vlastně Node je? Javascript běžící na příkazové řadce.
  • Instalace Node.js a NPM
    Jak to provést na Windows, Macu a Linuxu. Hraní s uživatelskými právy a NVM. Tahák pro práci s balíčkovacím systémem.
  • NPM: Základy a příkazy
    Instalace, aktualizace, struktura adresářů a základní příkazy pro NPM.
  • Soubor package.json
    Manifest závislostí projektu. Co je obsahem souboru a jak definovat závislosti?
  • Soubor package-lock.json
    „Lockfile“. Soubor, který uchovává přesné informace o instalovaných balíčcích. Neupravuje se, ale je dobré jej znát.
  • SemVer: Co je sémantické verzování
    Potřebujete znát také principy sémantického verzování. Jaké informace jsou uložené v číslech verze 1.2.3?
  • Yarn [Flavio Copes, EN]
    Co je Yarn, konkurence NPM? A základy – jak Yarn nainstalovat, spravovat balíčky a tak dále.
  • Yarn vs. NPM [Rising Stack, EN]
    Yarn ve své době představil řadu inovací, ale jsou pro přechod silné důvody i v roce 2018? Podle autora už moc ne.
  • Bower
    mrtvý nástroj, který sloužil pro správu frontendových (nikoliv jen javascriptových) balíčků. Je dnes prakticky plně nahrazený nástroji NPM nebo Yarn.

Sestavovače a spouštěče

Spouštěče úloh na příkazové řádce jako Grunt a Gulp nebo sestavovače jako je Webpack.

  • Grunt
    První spouštěč úloh („task runner“) na příkazové řádce, který je do dnes pro jednodušší použití naprosto v pohodě k užití.
  • Užitečné pluginy pro Grunt
    Co všechno je možné pomocí Gruntu dělat: Spojovat CSS, JS souboury, zmenšovat obrázky, prostě usnadnit vývoj.
  • Gulp.js [Sitepoint.com, EN]
    Gulp je spouštěč úloh na příkazové řádce podobný Gruntu, který se hodí na komplexnější projekty. V článku je pěkný úvod krok za krokem včetně popisu konfigurace.
  • Devstacky In­spi­rač­ní ka­ta­log fron­ten­do­vých zá­kla­den.
  • NPM skripty [CSSTricks.com, EN]
    Také přímo v NPM si můžete napsat skripty, které usnadňují práci s nástroji příkazové řádky.
  • Webpack
    Webpack je sestavovač, „bundler“: Nástroj pro práci s JS, CSS nebo obrázkovými zdroji a vytváření balíčků pro prohlížeč.
  • Parcel
    Jednodušší balíčkovač, bez nutnosti konfigurace. Rychlejší než Webpack.

Další

Zapomněl jsem na něco? Neváhejte mi napsat do komentářů nebo na sociální sítě.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?