O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Tomáš Musiol
Základní nástroje pro
automatizaci
• Vaše struktura projektu
• package.json - konfigurace npm balíčků

Výchozí závislost projektu na Gruntu

Výchozí projekt
GRUNT
The JavaScript Task Runner
npm install npm -g
npm install grunt-cli -g
npm install grunt-contrib-sass --save-dev
• Aktualizovaný soubor package.json
• Nová složka node_modules 

s nainstalovanými npm balíčky
Po instalaci GRUNTu
BOWER
A package manager for the web
npm install npm -g
npm install bower -g
cd ~/sites/test-project
bower search cezetmap
cezetm...
• nový soubor bower.json
• Nová složka bower_components 

s nainstalovanými komponentami a závislostmi
• .bowerrc - základ...
• konfigurační soubor package.json
• konfigurační soubor bower.json
• Není třeba commitovat celé složky, stačí jen 

konfigur...
Inicializace existujícího projektu
npm install
bower install
Po inicializaci projektu
GRUNT Tasky
Základní tasky pro webový vývoj
• grunt-contrib-concat
• grunt-contrib-copy
• grunt-contrib-htmlmin
• grunt-contrib-sass
•...
grunt pagespeed
YEOMAN
The Web's Scaffolding Tool
npm install npm -g
npm install yo -g
npm install generator-generator -g
yo [generator-name]
Vlastní průvodce pro tvorbu projektu
Co YEOMAN umí?
• Číst vstupy od uživatele a reagovat na ně
• Skriptovat pomocí JS
• Kopírovat soubory a složky
• Template ...
Pokrok nezastavíš :)
Děkuji za pozornost
Tomáš Musiol (@kozleek)
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Základní nástroje pro automatizaci
Próximos SlideShares
Carregando em…5
×

Základní nástroje pro automatizaci

2.148 visualizações

Publicada em

Základní nástroje pro automatizaci - Grunt, Bower, Yeoman
Frontendisti.cz, Ostrava

Publicada em: Internet

Základní nástroje pro automatizaci

  1. 1. Tomáš Musiol Základní nástroje pro automatizaci
  2. 2. • Vaše struktura projektu • package.json - konfigurace npm balíčků
 Výchozí závislost projektu na Gruntu
 Výchozí projekt
  3. 3. GRUNT
  4. 4. The JavaScript Task Runner npm install npm -g npm install grunt-cli -g npm install grunt-contrib-sass --save-dev
  5. 5. • Aktualizovaný soubor package.json • Nová složka node_modules 
 s nainstalovanými npm balíčky Po instalaci GRUNTu
  6. 6. BOWER
  7. 7. A package manager for the web npm install npm -g npm install bower -g cd ~/sites/test-project bower search cezetmap cezetmap git://github.com/Moravio/CEZET-Map.git bower install cezetmap --save-dev
  8. 8. • nový soubor bower.json • Nová složka bower_components 
 s nainstalovanými komponentami a závislostmi • .bowerrc - základní konfigurace prostředí 
 (změna defaultní cesty k bower balíčkům) Po instalaci BOWERu
  9. 9. • konfigurační soubor package.json • konfigurační soubor bower.json • Není třeba commitovat celé složky, stačí jen 
 konfigurační soubory Pro spolupracovníky
  10. 10. Inicializace existujícího projektu npm install bower install
  11. 11. Po inicializaci projektu
  12. 12. GRUNT Tasky
  13. 13. Základní tasky pro webový vývoj • grunt-contrib-concat • grunt-contrib-copy • grunt-contrib-htmlmin • grunt-contrib-sass • grunt-contrib-watch • grunt-libsass • grunt-autoprefixer • grunt-pagespeed • grunt-ftp-deploy • time-grunt • load-grunt-tasks • a mnoho dalších …
  14. 14. grunt pagespeed
  15. 15. YEOMAN
  16. 16. The Web's Scaffolding Tool npm install npm -g npm install yo -g npm install generator-generator -g yo [generator-name]
  17. 17. Vlastní průvodce pro tvorbu projektu
  18. 18. Co YEOMAN umí? • Číst vstupy od uživatele a reagovat na ně • Skriptovat pomocí JS • Kopírovat soubory a složky • Template a proměnné • Grunt / Bower • Ostatní NPM balíčky (GIT, DB, WP…)
  19. 19. Pokrok nezastavíš :)
  20. 20. Děkuji za pozornost Tomáš Musiol (@kozleek)

×