Začínáme s Gruntem

V současné době, když mluvíme o vývoji webu, existují faktory, které nás nutí záviset na velkém počtu úkolů, které musíme provést, jakmile vytvoříme kód, a mnohem více, pokud používáme JavaScript , protože existují různé nástroje, které potřebujeme, aby byla naše aplikace co nejoptimálnější.
Protože vše, co závisí na lidské bytosti, nemá tendenci být vždy dokonalé a tvořit ho chyby, vždy hledáme způsob, jak budovat procesy co nejčistší a zautomatizovat je, protože chyb je méně pravděpodobné, že bychom udělali všechny naši pozornost na něco jednou a pak necháme jeho post běh na stroji.

ZVĚTŠIT

Tady to přijde Grunt, což není nic jiného než výsledek tohoto hledání automatizace a snížení chyb a úspor práce. Byl vytvořen v roce 2012 a získává na popularitě, až dodnes je téměř základním prvkem každého prostředí, které obsahuje JavaScript jako vývojový jazyk.
Co je Grunt?Je to nástroj pro příkazový řádek nebo konzolu JavaScript který je zodpovědný za provádění úloh, které se opakují a zabírají spoustu času, například pokud potřebujeme zmenšit a zkomprimovat kód JavaScript, pokaždé, když upravíme soubor, musíme tyto dvě úlohy provést pomocí Grunt to je automatické, pokaždé, když změníme soubory Grunt má na starosti provádění těchto úkolů.
Díky tomuto druhu funkcí Grunt našel ve světě rozvoje velký ohlas, zejména u těch, na kterých svůj vývoj zakládá JavaScript s prostředími jako Node.js o CoffeeScript, což vedlo k velké komunitě s více než 2 000 doplňky v úložištích NPM, které pracují s Grunt.
Webové aplikace dnes rostou nejen co do velikosti, ale také do složitosti, což nás vede k vývoji množství kódu a vytváření nástrojů, které překračují lidskou hranici pro vyčerpávající kontrolu, proto vzniká vývoj na základě testů nebo TDD, a stejným způsobem existují další úkoly, které nemají nic společného s kódem, který nám umožňuje optimalizovat naši aplikaci.
Grunt pomáhá nám s druhou částí přístupu, umožňuje nám zkrátit čas, který musíme investovat do plnění úkolů, a tím nám pomáhá dodržovat zásadu SUCHÝ, abychom se neopakovali. Proto musíme použít Grunt abychom ušetřili čas a snížili naši pravděpodobnost chyb.
Už víme, co to je a proč bychom to měli používat, ale stále je o čem mluvit Grunt, kde je jednou z nejdůležitějších věcí vědět, jaké výhody nám to přináší, od větší konzistence v naší aplikaci až po oslovení vývojářské komunity, pak se pojďme podívat na výhody trochu podrobněji.
ÚčinnostNěkdy si myslíme, že ruční práce nám šetří čas potřebný k prozkoumání a implementaci některých nástrojů, ale ukazuje se, že kumulovaný čas za týden nebo za měsíc se stává nadměrným, kde můžeme ztratit až 4 nebo 5 hodin, s Grunt toto je sníženo, protože jednoduše jakmile automatizujeme úkol, na konci dne uvolníme tyto popravy z našich rukou.
KonzistenceJak jsme zmínili na začátku, lidská bytost je náchylná k chybám, a proto je automatizací můžeme omezit, Grunt Dává nám to příležitost provést vše přesně tak, jak jsme si ověřili, že nemá chyby, a tím vyřadit lidský faktor z rovnice a optimalizovat naše úkoly.
ÚčinnostVybudováním sady automatizovaných úkolů dokážeme svou mysl vypořádat s problémy, které skutečně vyžadují naši pozornost, a provedením méně úkolů budeme méně unavení, takže budeme efektivnější.
SpolečenstvíPokud existuje něco, o čem jsme si mysleli, že to potřebujeme pro naše automatizované prostředí, tak to určitě existuje, a to díky velkým výhodám Grunt Byla vybudována silná komunita pluginů, kterou můžeme mnohokrát používat volně a zdarma, čímž nám ušetří mnohem více práce.
Jakmile poznáme teoretické koncepty, výhody, důvody pro použití a další zajímavé aspekty GruntJe na čase, abychom mohli vše, co jsme se naučili, uvést do praxe, takže začněme instalací tohoto skvělého nástroje do našeho prostředí.
Grunt Je multiplatformní, takže ji můžeme použít na Windows, Mac a Linux, z praktických důvodů během tohoto tutoriálu uvidíme instalaci v prostředí OknaJakmile je však původní požadavek splněn, proces se v ostatních systémech příliš neliší.
Node.js a jeho správce balíčků a modulů npm jsou hlavním požadavkem před instalací Grunt, v současné době oba nástroje přicházejí se stejnou instalací, takže musíme pouze nainstalovat Node.js V našem systému je tento proces velmi jednoduchý a byl vysvětlen v jiných výukových programech. Navštivte však oficiální webové stránky projektu nodejs.org, kde zjistíte, jak nainstalovat náš operační systém.

ZVĚTŠIT

Jakmile jsme stáhli a máme Node.js běžící na našem systému jsme připraveni na další krok.
Instalace Grunt je to velmi jednoduché, nástroj získáme Grunt CLI, tj. rozhraní příkazového řádku, což nám umožní používat konzolu jako způsob indikace Grunt úkoly, které mají být splněny. K tomu použijeme npm a jeho úložiště, která jsou vždy aktualizována na nejnovější stabilní verzi projektu.
K tomu musíme jednoduše spustit následující příkaz v naší konzole příkazů:

 npm install -g grunt -cli

Tato akce nám ponechá nástroj již nainstalovaný, jak vidíme na následujícím snímku obrazovky naší konzoly.

Jak jsme viděli, instalace byla velmi jednoduchá a během několika sekund ponechá náš systém připraven k použití Grunt. Nyní musíme přejít do složky, kde je umístěn projekt, se kterým chceme propojit Grunt a provedeme následující instrukce:

 npm install grunt

To nám umožní začlenit Grunt v našem projektu a začněte jej používat, podívejme se, co nám konzole řekne, když to uděláme:

Naším dalším krokem je nyní generování souborů balíček.json Y Gruntfile.js, oba jsou pro naši aplikaci životně důležité, abychom mohli splnit všechny závislosti, které potřebujeme, a také to naznačit Grunt co dělat efektivně. Tyto soubory jsou klíčové, protože jsou jakýmsi rámcem, na kterém npm Y Grunt budou podporovány, pokud v našem projektu neexistují, budeme mít problémy s používáním nástroje.
Chcete -li vygenerovat obsah souboru balíček.json Stačí nám použít příkaz, který nám poskytne počáteční konfiguraci, k tomu musíme nejprve vytvořit prázdný soubor s názvem balíček.json, je velmi důležité, aby v něm byla obsažena dvě složená závorka {}, aby byla interpretována jako JSON, pak v naší konzole musíme ve stejném adresáři našeho projektu provést následující:

 npm install --save grunt grunt-contrib-uglify

Což nám v konzole příkazů poskytne následující zprávu:

Nakonec, pokud uvidíme náš soubor balíček.json Uvidíme, že byl aktualizován následujícím obsahem:

Nyní musíme vytvořit soubor Gruntfile.js, tohle řekne Grunt vše, co musí být provedeno v našem prostředí, takže je to životně důležitá součást, základní struktura tohoto souboru je následující:

 module.exports = function (grunt) {// zde je obsah našich úkolů};

Po komentáři je, že můžeme umístit naše různé naplánované úkoly, které se vytvoří, když spustíme příkaz zabručet všechny instrukce, které jsme vložili do tohoto souboru, jsou provedeny v naší konzole.
Jak jsme již viděli dostatek obsahu, vytváření automatizovaných úkolů necháme na jindy, důležité je, že jsme pochopili, že je Grunt, jaké jsou požadavky, které potřebujeme k jeho instalaci a vše, co nám nabízí.
Tím tento tutoriál uzavíráme, pokud chceme jít trochu hlouběji, můžeme přejít k oficiální dokumentaci nástroje, která je v angličtině, a tak rozšířit některé znalosti, které můžeme později uvést do praxe.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod