Podklady pre účastníkov školenia: http://www.vzhurudolu.cz/kurzy/grunt-gulp
- WINDOWS: Niektoré moduly vyžadujú systémové knižnice a cesty, ktoré defaultne vo Windows nie sú. Odporúčam nainštalovať Visual Studio Express, ktoré tie veci nainštaluje a nastaví automaticky. Samotné Visual Studio nebudeme potrebovať ani používať.
- Väčšinu času budeš tráviť v príkazovej riadke. Kvalitný terminál ti zjednoduší a ušetrí prácu. Štandardné terminály väčšinou nestoja za nič. Odporúčam stiahnuť a nainštalovať:
- Stiahni a nainštaluj Git.
- Stiahni a nainštaluj Node.js. Budeš ho potrebovať na úplne všetko.
- Nakoniec si globálne nainštaluj moduly Grunt, Gulp, Yeoman a Bower. V konzole postupne napíš tieto príkazy.
- MAC: Inštalácia globálnych modulov vyžaduje admin práva. Takže pred každý príkaz treba napísať
sudo
.
- MAC: Inštalácia globálnych modulov vyžaduje admin práva. Takže pred každý príkaz treba napísať
# globalna instalacia Grunt CLI
npm install -g grunt-cli
# globalna instalacia Gulp
npm install -g gulp
# globalna instalacia Yeoman
npm install -g yo
# globalna instalacia Bower
npm install -g bower
# Stiahne najaktualnejsiu verziu jQuery a ulozi ju do bower_components/jquery
bower install jquery
# Nainstaluje Bootstrap, ktory ma zavislost na jQuery.
bower install bootstrap
# Vytvor bower.json a pridaj do neho jQuery
bower init
bower install jquery --save
# Nainstaluj vsetky komponenty pre tento projekt
bower install
# Zobraz vsetky nainstalovane komponenty a ich verzie
bower list
# Zaktualizuj vsetky komponenty pre tento projekt
bower update
# Instalacia generatoru (generatory treba instalovat globalne)
npm install -g generator-webapp
# Vypis zoznam nainstalovanych generatorov
yo -h
# Vytvori scaffold noveho projektu
yo webapp
# Spusti automatizaciu projektu, vratane lokalneho serveru pre Livereload
grunt serve
# Spustit v adresari, kde su zdrojaky generatoru. Vytvori alias pre tento
# adresar ako globalny NPM modul.
npm link
# Vytvori scaffold projektu (hlavny generator)
yo example
# Pouzitie subgeneratoru
yo example:page
# Nainstaluj vsetky zavislosti projektu
npm install
# Spustenie defaultneho Grunt tasku
grunt
# Spustenie konkretneho Grunt tasku (napr. watch)
# Ak je dany task multitask, spusti to postupne vsetky jeho subtasky.
grunt watch
# Spustenie konkretneho subtasku
grunt watch:less
# Inicializuj NPM projekt, vytvor package.json
npm init
# Pridaj lokalny Grunt (alebo ine moduly) do projektu
npm install grunt --save-dev
# Nainstaluj vsetky zavislosti projektu
npm install
# Vypis vsetkych dostupnych taskov
gulp --task
gulp -T
# Spustenie defaultneho Gulp tasku
gulp
# Spustenie konkretneho Gulp tasku (napr. watch)
gulp watch