Jak začít používat balíčkovací systém Node.js npm, Ruby gem a automatizační systém úkolů Grunt

ℹ️ Obrazek v tomto prispevku byl dostupny jen jako mala miniatura (original nikde nedohledatelny), proto byl kvalitne zvetsen (u screenshotu s textem bikubicky, u fotek AI algoritmem Real-ESRGAN). Nemusi presne odpovidat puvodnimu originalu v ostrosti detailu.

Postup budu popisovat pro Windows 8 pro build souboru tohoto jQuery pluginu: https://github.com/dimsemenov/photoswipe.

  1. Stáhněte si instalátor Node.js pro vaši verzi Windows z https://nodejs.org/download/ a nainstalujte všechny součásti. Jedna ze součástí je balíčkovací systém npm a druhá je uložení cesty ke Node.js do systémové proměnné PATH a cestu k npm do uživatelské proměnné PATH.
  2. Nyní zadáme repozitář který chceme naklonovat – zřejmě z GitHubu. Toto musíte provést v Git Shellu, který se vám nainstaluje společně s Git For Windows.
    BASH
    git clone https://github.com/dimsemenov/PhotoSwipe.git
  3. Nyní si otevřeme Command Line – zmáčkneme win+r, napíšeme cmd a odentrujeme. Prvně nainstaluje 4 balíčky Node.js. Nevím zda jsou všechny 4 potřeba ale s nimi mi to fungovalo a už jsem to dále neověřoval. Tímto se nainstalují balíčky, bez kterých se build neobejde.
    BASH
    npm install -g grunt-cli
    npm install -g grunt
    npm install -g grunt
    npm install -g jekyll-cli
  4. Přejdeme do adresáře se naklonovaným repozitářem a spustím instalaci balíčků, na kterých je závislý pouze tento repozitář, neuloží se globálně, nýbrž do složky node_modules repozitáře. Toto bude v tomto případě trvat trochu dýl, protože závislostí je fakt hodně.
    BASH
    cd PhotoSwipe
    npm install
  5. Nyní potřebujeme Ruby for Windows a jeho balíčkovací systém gem. Můžete pokračovat s mým návodem a nebo s velice podrobným 👻 RIP – tenhle server nepřežil ani vlastní hosting. ze kterého vycházím já. Ruby stáhněte ze stránky http://rubyinstaller.org/downloads/ úplně vlevo nahoře by měla být poslední verze .exe instalátoru, jen pozor na bitovou verzi Windows. Opět vyberte vše co vám instalátor nabízí:
    ruby-path
  6. Stáhněte si RubyDevKit ze stránky, spíše dole vlevo je záložka DEVELOPMENT KIT kde najdete verzi jak pro x86 tak pro x64 systémy. Je to samorozbalovací archiv, jen pozor že pokud chcete mít jeho obsah ve složce C:\RubyDevKit, musíte tuto složku vytvořit a vybrat plnou cestu ke složce. Vyberete-li pouze C:, soubory se vám rozbalí do rootu disku a udělají svinčík.
  7. Přejděte do vytvořené složky, zjistíte si informace o Ruby instalaci a přidáte do ní RubyDevKit.
    BASH
    cd C:\RubyDevKit
    ruby dk.rb init
    ruby dk.rb install
  8. Blížíme se do finiše. Nainstalujeme Jekyll, což je generátor statických stránek v různé syntaxi. Bez tohoto programu byste build provést nemohli, protože by vám vždy vyhodil chybu.
    BASH
    gem install jekyll
  9. Závěr – přejdeme zpět do složky, kde jste si naklonovali repozitář (v mém případě „C:\Users\Radeksunamo\PhotoSwipe„) a spustíme build pomocí Gruntu:
    BASH
    grunt

A to je vše. V složce repozitáře najdete složku _site, která obsahuje různé soubory které by se vám mohly hodit. Nicméně ve většině případů asi budete pouze potřebovat složku _site/dist která obsahuje JS, CSS, fonty atd. 📦

Napsat komentář