Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Základní nástroje pro automatizaci

2,105 views

Published on

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

Published in: 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)

×