Vytvořte náš první úkol s Gruntem

Instalace a zřízení Grunt Je to něco docela jednoduchého, ale jakmile máme všechny nástroje a známe některé základní příkazy, často si říkáme, co teď můžeme dělat? Další krok je velmi jednoduchý, je čas začít stavět úkoly.
Myšlenka úkolu spočívá v tom, že to může být něco, co může vyřešit časté problémy nebo činnosti, které vždy provádíme během pracovního dne nebo při vývoji aplikací, přičemž vzhledem k tomu, že se povaha opakuje, můžeme těmto úkolům nastavit parametry, a tak mohou vždy fungovat aniž byste je museli vyrábět od nuly.
PožadavkyTento tutoriál doporučuje, abyste znali základní principy JavaScript protože použijeme mnoho věcí z tohoto jazyka. Dalším zásadním požadavkem je, že musíme mít nainstalované a nakonfigurované Grunt v našem systému nebo sandboxu to znamená, že musíme mít Node.js, váš správce balíčků npm a samozřejmě Grunt. Nakonec musíme mít textový editor pro vytváření obsahu našich cvičení a dostatečná oprávnění k vytváření souborů a volnému spouštění příkazu grunt v konzole.
Úkol je aktivita, která má začátek, vývoj a konec Grunt úkol není nic jiného než funkce v JavaScript který je obsažen v souboru Gruntfile.js a to při provádění příkazu zabručet v naší konzole můžeme zajistit spuštění této funkce, což způsobí spuštění jejího obsahu.
Úkoly jsou spravovány modulárním způsobem, hodně ve stylu základní konstituce Node.jsProto pokaždé, když definujeme novou sadu úkolů, musíme přidat instrukce, které udávají jejich modularitu.
Abychom mohli vytvořit úkol, potřebujeme v našem souboru základní kód gruntfile.js, tento kód se nazývá kotli protože se to opakuje, nicméně to používáme jen jednou, podívejme se, jak to vypadá:

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

Jakmile vložíme tento kód do našeho souboru, již máme základ nebo konstituci, abychom mohli vytvářet naše úkoly. Jakmile to bude hotovo, uděláme úkol, který nám umožní napsat zprávu pomocí konzoly, a proto napíšeme následující kód:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {console.log ('Hello, we have entered a message in Grunt.');});};

To, co jsme udělali, je velmi snadné vysvětlit, nejprve jsme vzali objekt zabručet které vytváříme pomocí našeho kódu kotli, pak jsme v tomto objektu provedli metodu registerTask co nám pomáhá říci Grunt že přidáváme nový úkol, další akt mu dáme jméno a poté mu pomocí anonymní funkce předáme obsah našeho úkolu, což je v tomto případě zpráva na konzole.
Podívejme se, jak tento příklad vypadá při provádění úkolu, ve složce, kam ukládáme náš soubor gruntfile.js provedeme následující příkaz:

 zabručet

Kde by nám pak konzole měla poskytnout výsledek jako následující:

Je důležité zmínit, že pro tento úkol používáme výchozí název, protože to je úkol, který Grunt bude ve výchozím nastavení vyhledávat, jak naznačuje jeho název v našem souboru gruntfile.jsPokud by toto jméno nemělo, při provádění by se zobrazila chyba zabručet jak vidíme na následujícím obrázku:

Náš předchozí příklad, i když funguje, není nejvíce doporučován, jednoduše jsme použili konzolu Node.js ale to nemá všechny funkce a vlastnosti konzoly Grunt takže pokud máme nějaké další informace z modulu úloh, určitě je neuvidíme. Proto musíme použít konzolu našeho enginu pro automatizaci úloh, koncept ve filozofii je prakticky stejný, pouze měníme objekty a funkce, které musíme volat.
Podívejme se v následujícím kódu, jak můžeme přepsat náš kód z předchozího příkladu, abychom mohli splnit to, co jsme vysvětlovali:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {grunt.log.writeln ('This message is displayed by the Grunt console.');});};

Jak vidíme, předmět používáme pouze znovu zabručet iniciálu souboru, pak použijeme jeho třídu log a nakonec metoda writeeln, výsledek je stejný jako v předchozím příkladu pouze s tím rozdílem, že jsme pro naše účely použili něco optimálnějšího. Podívejme se na následujícím obrázku, jak bylo vše správně udržováno:

Na začátku jsme hovořili o opakovaně použitelných úkolech a které nám umožňují ušetřit čas. Jednou z věcí, které nám mohou umožnit dosáhnout přiměřeného stupně opětovného použití úkolů, je možnost přidat k nim parametry, čímž můžeme změnit některé hodnoty. Podle situace, ve které se můžeme nacházet, například vytváření uživatelů pro systém přímo s Grunt, pomocí kterého můžeme jako parametr předat název souboru se seznamem uživatelů.
V následujícím kódu uděláme něco velmi zajímavého, nejprve se podíváme na to, jak vytvářet úkoly, které nejsou naším výchozím procesem, díky tomu již budeme mít klíč k tomu, abychom měli několik úkolů ve stejném souboru. Parametr, který obdrží náš úkol, bude jednoduše nastaven v anonymní funkci, čímž jej můžeme zachytit a zpracovat v jeho těle.
Podívejme se na kód pro generování tohoto úkolu, jako cvičení můžeme umístit uvedený kód za náš výchozí úkol, abychom otestovali, co jsme vysvětlili:

 grunt.registerTask ('pozdravit', funkce (jméno) {grunt.log.writeln ('Hello:' + name + 'good morning today');});

Nyní, abychom z úkolu zavolali úkol, jednoduše provedeme následující:

 grunt pozdravit: Jméno

Jak vidíme, umístíme název úkolu a dvojtečkou se oddělíme, abychom předali potřebný parametr, v tomto případě název, který chceme úkolu poslat, uvidíme, jak to vypadá v naší konzole:

Co se nyní stane, když náš úkol vyžaduje, abychom předali dva nebo více parametrů, jednoduše do stejného kódu je přidáváme oddělené čárkami jako funkce JavaScript normální, a když je zavoláme do konzoly, můžeme je umístit stejným způsobem oddělení, podívejme se na kód, kde provádíme úkol, který nám ukazuje toto:

 grunt.registerTask ('add', function (value1, value2) {var sum = Number (value1) + Number (value2); grunt.log.writeln ('The result of adding' + value1 + ' +' + value2 + ' je: '+ součet);});

Nyní se podívejme, jak to vypadá, když pomocí konzoly spustíme tento příklad s voláním a odpovědí:

Všimli jsme si něčeho zajímavého, co používáme JavaScript Ploché a jednoduché definování zpracování, použití tohoto jazyka je velmi důležité, protože tímto způsobem budeme moci rozšířit naši kapacitu o vše, čeho můžeme dosáhnout v době budování našich úkolů pomocí Grunt.
V našich úkolech je možné použít varování, čímž můžeme trochu ověřit parametry přijaté od uživatele, například náš předchozí úkol je součet, ale pokud zadáme něco jiného než číslo, naše operace určitě selže, takže můžeme proveďte následující: pomocí metody varovat () Ověříme, že oba parametry jsou čísla, a v případě, že nejsou, spustíme varování:

 grunt.registerTask ('add', function (value1, value2) {if (isNaN (Number (value1))) {grunt.warn ('The first value' + value1 + 'must be a number.');} if ( isNaN (Number (value2))) {grunt.warn ('The second value' + value2 + 'must be a number.');} Var sum = Number (value1) + Number (value2); grunt.log.writeln ( 'Výsledek sčítání' + hodnota1 + ' +' + hodnota2 + 'je:' + součet);});

V našem přepsaném kódu jsme to ověřili, pokud výsledek převodu na Číslo () z parametrů není číslo spustit metodu varovat () nebo varování, toto přeruší vlákno a zobrazí zprávu, abychom se mohli vyhnout chybnému úkolu. Podívejme se, jak to vypadá v naší konzole při provádění úkolu:

Jak jsme si také všimli znalosti jazyka JavaScript Je to velmi důležité, takže pokud jsme pod úrovní, na kterou chceme dosáhnout, musíme cvičit a snažit se dělat co nejvíce cvičení, abychom zlepšili své dovednosti.
Tím jsme tento tutoriál dokončili, protože vidíme vytváření úkolů pomocí Grunt Není to příliš složité, spíše nám jeho logika v době jejich definování pomáhá usnadnit pochopení používání nástroje. Skutečná složitost spočívá v definici naší vlastní logiky v okamžiku, kdy budeme vědět, co náš úkol udělá a jak jej můžeme učinit co nejvíce opakovaně použitelným, protože pokud tomu tak není, budeme pracovat marně.