Jak používat Grunt pro automatizaci pracovního postupu [Návody]

Jsem obhájce automatizace protože to dělá život mnohem jednodušším. Proč trávit čas na podřadných, monotónních úkolech, které nasávají životní sílu, když máte počítač, který pro vás dělá věci? To platí zejména pro vývoj webových aplikací.

Mnoho vývojových úkolů může být fuškou. Při vývoji možná budete chtít kompilovat kód, když tlačíte vývojovou verzi, můžete zřetězit a minifikovat soubory, odebrat zdroje pouze pro vývoj a tak dále. Dokonce i relativně nekomplikované, jako je mazání spoustu souborů nebo přejmenování složek může zabrat velký kus naší doby.

V tomto článku vám ukážu, jak si můžete usnadnit život tím, že využijete vynikající funkce, které nabízí Grunt, běžce úloh Javascript. Vezmu vás celým procesem, takže se nebudete bát, i když nejste průvodce Javascriptem!

Více na stránkách Hongkiat.com:

CSSMatic usnadňuje CSS pro webové designéry
Automatizace úkolů v Mac se složkami Akce
Automatizujte soubory Dropbox pomocí akcí
10 aplikací pomáhá automatizovat úkoly v zařízení se systémem Android
Jak (automaticky) zálohovat vaše webové stránky do Dropboxu

Instalace Grunt

Instalace Grunt je velmi snadná, protože používá uzel správce balíčků. To znamená, že také budete muset nainstalovat samotný uzel. Otevřete terminál nebo příkazový řádek (budu nyní volat tento terminál) a zadejte nmp -v.

Pokud vidíte číslo verze, které máte npm Pokud se zobrazí chyba „příkaz nebyl nalezen“, budete ji muset nainstalovat tak, že přejdete na stránku ke stažení uzlu a vyberete požadovanou verzi..

Jakmile je Node nainstalován, získávání Grunt je otázkou jediného příkazu vydaného v terminálu:

npm install -g grunt-cli

Základní použití

Budete používat Grunt na základě projektu na projekt, protože každý projekt bude mít různé požadavky. Začněme nyní projekt vytvořením složky a navigací k ní přes náš terminál.

Srdce Gruntu tvoří dva soubory: package.json a Gruntfile.js. Soubor balíčku definuje všechny závislosti třetích stran, které bude vaše automatizace používat jak přesně tyto. Vytvořme nyní soubor balíku holých kostí s následujícím obsahem:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Jméno a verze závisí na vás, závislosti musí obsahovat všechny balíčky, které používáte. V tuto chvíli neděláme nic, takže se jen ujistíme, že je jako závislost přidán samotný Grunt.

Možná se ptáte sami sebe, co tam dělá strmácí linie (~) zvaná tilde.

Verze mohou být vyžadovány pomocí pravidel ze sémantické verze pro npm. Ve zkratce:

Specifikujte přesnou verzi 4.5.2
Můžete použít větší než / méně než k označení minimální nebo maximální verze, například > 4.0.3
Použití tilde určuje blok verze. Použitím ~ 1.2 je považován za 1.2.x, jakékoli verze nad 1.2.0, ale pod 1.3

K dispozici je mnohem více způsobů, jak určit verze, ale to je dostačující pro většinu potřeb. Dalším krokem je vytvoření Gruntfile, který bude provádět naše automatizace.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('výchozí', []); ;

Toto je v podstatě kostra pro Gruntfile; existují dvě zajímavá místa. Jedno místo je uvnitř initConfig () funkce. To je místo, kde všechny vaše konfigurace projektu jde. To bude zahrnovat věci, jako je zpracování kompilace LESS / SASS, zhuštění skriptů a tak dále.

Druhé umístění je pod touto funkcí, kde zadáváte úkoly. Můžete vidět jednu zadanou úlohu “výchozí”. V tuto chvíli je prázdná, takže nic neudělá, ale později to rozbalíme. Úkoly v podstatě fronty bity a kousky z naší konfigurace projektu a provést je.

Například úkol s názvem “skripty” může zřetězit všechny naše skripty, poté výsledný soubor minifikovat a pak jej přesunout do jeho konečného umístění. Tyto tři akce jsou definovány v konfiguraci projektu, ale jsou “táhli k sobě” úkol. Pokud to není jasné, ale nebojte se, budu vám ukazovat, jak se to dělá.

Náš první úkol

Vytvořme úkol, který pro nás zkomprimuje jeden soubor javascriptu.

K tomu, abychom mohli přidat nový úkol, musíme kdykoli udělat čtyři věci:

V případě potřeby nainstalujte plugin
Vyžadujte to v Gruntfile
Napište úkol
V případě potřeby ji přidejte do skupiny úkolů

(1) Najít a nainstalovat plugin

Nejjednodušší způsob, jak najít plugin, který potřebujete, je napsat něco podobného do Googlu: “minify javascript grunt plugin”. První výsledek by vás měl přivést k zásuvnému modulu grunt-contrib-uglify, který právě potřebujeme.

Stránka Github vám řekne vše, co potřebujete vědět. Instalace je v terminálu jeden řádek, zde je třeba použít:

 npm install grunt-contrib-uglify --save-dev

Možná budete muset spustit toto s administrátorskými oprávněními. Pokud se vám něco líbí npm ERR! Zkuste znovu spustit tento příkaz jako root / Administrator. podél cesty stačí zadat příkaz sudo a zadat heslo při zobrazení výzvy:

 sudo npm install grunt-contrib-uglify --save-dev

Tento příkaz skutečně analyzuje váš package.json a přidává ji jako závislost, nemusíte to dělat ručně.

(2) Vyžadovat v Gruntfile

Dalším krokem je přidání do vašeho Gruntfile jako požadavku. Líbí se mi přidat pluginy v horní části souboru, tady je můj kompletní Gruntfile po přidání grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('výchozí', []); ;

(3) Vytvořte úkol pro zhuštění skriptů

Jak jsme diskutovali, mělo by to být provedeno v rámci EU initConfig () funkce. Stránka Github pro plugin (a většinu dalších pluginů) vám poskytuje spoustu informací a příkladů. Zde je to, co jsem použil ve svém testovacím projektu.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'

To je docela jednoduché, já jsem uvedl scripts.js souboru v adresáři js mého projektu a cílovém umístění pro soubor, který byl zkopírován. Existuje několik způsobů, jak určit zdrojové soubory, později se na to podíváme.

Podívejme se nyní na kompletní Gruntfile poté, co byl přidán..

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('výchozí', []); ;

(4) Tuto konfiguraci přidejte do skupiny úkolů

Právě teď můžete jít do svého terminálu a typu grunt uglify ale budeme potřebovat skupiny úkolů, abychom mohli později spouštět více úloh. Výchozí úloha je prázdná, jen čekáme, až něco přidáme.

 grunt.registerTask ('default', ['uglify']);

V této fázi byste měli být schopni jít do terminálu, typu grunt a podívejte se, jak proběhlo zhoštění. Nezapomeňte vytvořit scripts.js souboru!

Nestalo to dlouho, než jsem to udělal? Dokonce i když jste na tohle všechno noví a trvalo vám nějaký čas na práci v krocích, čas, který ušetří, překoná čas strávený na něm během několika málo použití.

Zřetězení souborů

Podívejme se na spojování souborů a se dozvíte, jak určit více souborů jako cíl při cestě.

Zřetězení je proces kombinování obsahu více souborů do jednoho souboru. Potřebujeme plugin grunt-contrib-concat. Pracujme podle kroků:

Chcete-li nainstalovat plugin npm install grunt-contrib-concat --save-dev v terminálu. Až budete hotovi, nezapomeňte jej přidat do svého Gruntfile stejně jako před použitím grunt.loadNpmTasks ('grunt-contrib-concat');.

Další je konfigurace. Pojďme zkombinovat tři konkrétní soubory, syntaxe bude známá.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,,

Výše uvedený kód přebírá tři soubory jako zdroj a kombinuje je do souboru určeného jako cíl.

To je již dost mocné, ale co když se přidá nový soubor? Musíme se sem neustále vracet? Samozřejmě že ne, můžeme určit celou složku souborů, které se mají spojit.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,

Nyní bude každý soubor javascriptu ve složce dev / js sloučen do jednoho velkého souboru: js / scripts.js, mnohem lepší!

Nyní je čas vytvořit úkol, abychom mohli skutečně spojit některé soubory.

 grunt.registerTask ('mergejs', ['concat']);

Toto již není výchozí úloha, takže budeme muset zadat její jméno do terminálu, když vydáme grunt příkaz.

 grunt mergejs

Automatizace naší automatizace

Už jsme udělali velký pokrok, ale je toho víc! Chcete-li nyní zřetězit nebo minifikovat, musíte jít do terminálu a zadat příslušný příkaz. Je nejvyšší čas se podívat na hodinky příkaz, který to udělá za nás. Naučíme se také, jak provádět mulitple úkoly najednou po cestě.

Abychom mohli jít, budeme muset chytit grunt-contrib-watch. Jsem si jistý, že jej můžete nainstalovat a přidat do souboru Gruntfile na yuor vlastní, takže začnu zobrazením toho, co používám v testovacím projektu..

 watch: scripts: files: ['dev / js / *. js'], úkoly: ['concat', 'uglify'],,

Jmenoval jsem soubor souborů, které se mají sledovat “skripty”, Jen tak vím, co to dělá. V rámci tohoto objektu jsem zadal soubory, které se mají sledovat, a úkoly, které se mají spustit. V předchozím příkladu zřetězení jsme společně vytáhli všechny soubory v adresáři dev / js.

V příkladu minifikace jsme tento soubor zhuštění. Je smysluplné sledovat složky dev / js pro změny a spouštět tyto úkoly, kdykoli existují.

Jak vidíte, více úkolů lze snadno zavolat oddělením čárkami. Budou prováděny v pořadí, nejprve zřetězení, pak v tomto případě minifikace. To lze také provést se skupinami úkolů, což je druh, proč existují.

Nyní můžeme změnit svůj výchozí úkol:

 grunt.registerTask ('výchozí', ['concat', 'uglify']);

Teď máme dvě možnosti. Kdykoliv chcete spojit a minifikovat skripty, můžete přepnout na terminál a typ grunt. Chcete-li zahájit sledování souborů, můžete také použít příkaz Watch: gruntové hodinky.

Bude tam sedět a čeká na úpravy těchto souborů. Jakmile to uděláte, bude plnit všechny úkoly, které mu byly přiděleny, pokračovat, zkusit to.

To je mnohem lepší, od nás nepotřebujeme žádný vstup. Nyní můžete pracovat se svými soubory a vše bude pro vás hezky provedeno.

Přehled

Díky této základní znalosti o tom, jak mohou být pluginy instalovány a používány a jak funguje příkaz watch, jste všichni připraveni stát se závislým na automatizaci. Gruntovi je mnohem víc než to, o čem jsme mluvili, ale nic, co byste nemohli zvládnout sami.

Použití příkazů pro kompilaci SASS, optimalizace obrazů, autoprefixů a další je jen otázkou následování kroků, o kterých jsme diskutovali a čtení syntaxe, kterou plugin vyžaduje..

Pokud víte o některých speciálně skvělých způsobech použití pro Grunt, dejte nám prosím vědět v komentářích, vždy nás zajímá, jak používáte nástroje jako Grunt!