Grunt je nástroj napsaný v Node.js a distribuovaný přes npm. Grunt slouží ke spouštění jedné, nebo více úloh na straně front-endu, počínaje minifikace, kompilace CSS preprocesorů (Less, Sass) až po spojování více souborů v jeden. Zároveň dokáže sledovat změny v upravovaných souborech a při každé změně spustit připravené úlohy, což se výborně hodí když potřebujeme průběžně překládat Sass soubory na CSS.
Instalace Node.js a npm
Jako první potřebujeme mít nainstalovaný Node.js a dále npm což je balíčkovací systém Node.js, přes který se pak dostaneme k nástroji Grunt. Nainstalujeme si Node.js buď stažením PKG balíku ze stránek, nebo ideálně přes Homebrew:
brew install nodeTím se automaticky nainstaluje i npm. Pokud bude brew hlásit nějakou chybu, možná bude potřeba spustit příkaz jako root (sudo brew install node).
package.json
Všechny nástroje distribuované přes Npm lze instalovat buď ručně, nebo si vytvořit soubor package.json v rámci našeho projektu, ze kterého se pak vše pomocí příkazu npm install nainstaluje automaticky včetně všech závislostí. Je to obdoba souboru composer.json pro nástroj Composer.
Vytvoříme soubor package.json pomocí npm:
npm initPrůvodce se nás zeptá na název projektu, verzi, popis a několik dalších parametrů. Nic z toho není prozatím důležité a lze kdykoli změnit přímo ve vygenerovaném package.json souboru. Nyní můžeme přidávat do projektu žádané nástroje.
Instalace Grunt
Nainstalujeme do projektu nástroj Grunt:
npm install grunt --save-devParametr save-dev nám upraví soubor package.json a přidá tam řádek s Gruntem, aby se příště nainstaloval již automaticky (obdoba příkazu require pro Composer). Suffix dev znamená, že se Grunt instaluje pouze pro development prostředí (kompilaci Sass souborů na produkci nepotřebujeme). Také si můžeme všimnout, že došlo k vytvoření složky node_modules, kam se Node.js moduly instalují (něco jako složka vendor pro Composer). Tuto složku můžeme klidně smazat a obnovit příkazem npm install. Stejně tak se složka node_modules ani nemusí verzovat.
Dále potřebujeme ještě nástroj grunt-cli pro spouštění příkazů v příkazové řádce:
npm intall grunt-cli --save-devPoznámka: Všechny nástroje lze instalovat také globálně pomocí přepínače -g.
Instalace nástrojů pro Sass a Compass
Jenom v rychlosti doinstalujeme nástroje pro kompilaci Scss souborů s podporou frameworku Compass:
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-notify --save-devWatch je nástroj, který sleduje změny v souborech a dokáže automaticky spustit kompilaci Scss souborů při změně. Grunt notify slouží pro MacOs a dokáže zobrazit Growl informační box, pokud nastane chyba při kompilaci, protože pokud píšeme kód a na druhém monitoru máme prohlížeč s výstupem, ne vždy průběžně kontrolujeme příkazovou řádku, jestli nastala nějaká chyba, nebo ne.
Konfigurace Gruntu
Pomocí návodu pro vytvoření základního Gruntfile vytvoříme konfiguraci pro Grunt, která nám říká, které úlohy budou pro daný projekt dostupné.
Soubor může vypadat například takto:
module.exports = function (grunt) {
var options = {
scss: {
root: 'scss/'
},
css: {
root: 'css/'
}
};
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed',
compass: true
},
files: {
'css/style.css': options.scss.root + 'style.scss'
}
}
},
watch: {
views: {
files: '*.html',
options: {
livereload: true
}
},
sass: {
files: 'scss/**/*.scss',
tasks: 'sass',
options: {
compass: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', ['watch']);
grunt.registerTask('build', ['sass']);
};
V souboru nadefinujeme dvě úlohy, watch a sass. Watch úloha bude výchozí (default) a spustí se pokud zadáme příkaz grunt bez žádných parametrů. Bude dělat to, že sleduje změny v souborech (zde konkrétně ve všech HTML a Sass souborech). Direktiva
files: 'scss/**/*.scss'znamená všechny soubory ve složce scss i podsložkách (lze to samé zapsat pro templates/**/*.html).
Úlohu 'sass' přiřadíme k příkazu 'build' a spustí se tedy po zadání příkazu grunt build a provede kompilaci Scss souborů na Css soubory.
Jednotlivé úlohy lze spouštět i samostatně: grunt watch, grunt sass
Ukázka workflow
Nyní když máme Grunt připravený, ukážeme si jak s tím pracovat. Na GitHubu jsem připravil vzorový projekt BasicHtml5Grunt, kde je již Grunt připraven dle návodu výše.
Stáhneme si tedy šablonu do nějaké vlastní složky, nainstalujeme Node.js a spustíme příkaz npm install, který se podívá do připraveného souboru package.json a nainstaluje všechny potřebné nástroje včetně Gruntu.
Spustíme příkaz grunt build, čímž by mělo dojít k úspěšnému překladu Scss souborů na Css a vypsání hlášky 'Done, without errors.'. Tím máme přeložené Scss soubory.
Dále spustíme příkaz grunt. V okně terminálu se spustí watch proces, který sleduje změny zdrojových souborů. Zkusíme udělat nějakou změnu v HTML, nebo Scss souboru, uložíme a v terminálu vidíme, že ihned došlo k překladu souboru. Proces watch ukončíme stiskem Ctrl+C.
Live reload
Vzhledem k tomu, že se nám soubory překládají automaticky, bylo by fajn, když by se nám i automaticky obnovovalo okno prohlížeče (které můžeme mít například na druhém monitoru), takže ihned po uložení změněného zdrojového souboru uvidíme změnu v prohlížeči. Slouží k tomu parametr livereload v Gruntfile.js nastavený na true.
Dále pak potřebujeme doplněk do prohlížeče, např. plugin LiveReload do Chrome, který si nainstalujeme a aktivujeme kliknutím na něj (musí již běžet grunt watch v terminálu).
LiveReload funguje na principu vložení dalšího extra javascriptu do našeho kódu v rámci prohlížeče. Zkuste si schválně otevřít zdrojový kód přes inspektor když je zapnutý LiveReload. Pro Symfony toto není potřeba, protože to vkládá livereload skript automaticky.