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.

Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti

4,892 views

Published on

Published in: Engineering, Business, Technology
  • Be the first to comment

Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti

  1. 1. Automatizácia vývoja
  2. 2. Kompilácia
  3. 3. class Person constructor: (@name = 'John Doe') -> greet: -> console.log "Hi! My name is #{@name}" 1. CoffeeScript
  4. 4. 2. ???
  5. 5. var Person; Person = (function() { function Person(name) { this.name = name != null ? name : 'John Doe'; } Person.prototype.greet = function() { return console.log("Hi! My name is " + this.name); }; return Person; })(); 3. Profit!!!
  6. 6. module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-watch' grunt.loadNpmTasks 'grunt-contrib-coffee' grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee'] coffee: files: 'js/my_project.js': 'coffee/*.coffee' Gruntfile.coffee
  7. 7. Minifikácia kódu
  8. 8. var Person; Person = (function() { function Person(name) { this.name = name != null ? name : 'John Doe'; } Person.prototype.greet = function() { return console.log("Hi! My name is " + this.name); }; return Person; })(); 1. Neminifikovaný kód
  9. 9. 2. ???
  10. 10. var Person;Person=function(){function e(e){this.name=e!=null?e:"John Doe"}e.prototype.greet=function(){return console.log("Hi! My name is "+this.name)};return e}() 3. Profit!!!
  11. 11. module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-uglify' grunt.loadNpmTasks 'grunt-contrib-cssmin' grunt.initConfig uglify: files: 'js/my_project.min.js': 'js/my_project.js' cssmin: files: 'js/my_project.min.css': 'js/my_project.css' Gruntfile.coffee
  12. 12. Minifikácia obrázkov
  13. 13. 1. Obrovský obrázok 2500 KB
  14. 14. 2. ???
  15. 15. 2500 KB => 125 KB 3. Profit!!!
  16. 16. module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-imagemin' grunt.initConfig imagemin: files: expand: true cwd: 'originals/' src: '*.{jpg,png,gif}' dest: 'optimized/' Gruntfile.coffee
  17. 17. module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-svg2png' grunt.initConfig svg2png: files: src: ‘originals/*.svg' dest: 'images/' Gruntfile.coffee
  18. 18. module.exports = (grunt) -> grunt.loadNpmTasks ‘grunt-responsive-images' grunt.initConfig responsive_images: options: sizes: [{width: 320}, {width: 640},{width: 1024}] files: expand: true cwd: 'originals/' src: '*.jpg' dest: 'images/' Gruntfile.coffee
  19. 19. module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-spritesmith' grunt.initConfig sprite: src: 'originals/icons/*.png', destImg: 'build/sprites.png', destCSS: 'build/sprites.css' Gruntfile.coffee
  20. 20. Buildovanie
  21. 21. module.exports = (grunt) -> ... grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee', 'concat', 'uglify'] 1. Pomalý watch
  22. 22. 2. ???
  23. 23. module.exports = (grunt) -> ... grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee'] grunt.registerTask 'build', ['coffee', 'concat', 'uglify'] 3. Profit!!!
  24. 24. Ka dý si postavil devstack.ž Kdo íká, e ne, staví ho dodneška.ř ž — Martin Malý
  25. 25. GIT SUBMODULE NOT EVEN ONCE
  26. 26. Bower
  27. 27. // shell bower install bootstrap --save 1. Potrebujem Bootstrap
  28. 28. 2. ???
  29. 29. // bower.json { "name": "my-project", "version": "0.1.0", "dependencies": { "jquery": "~2.1.1", "bootstrap": "~3.1.1" } } 3. Profit!!!
  30. 30. 3.1.4
  31. 31. TEAMWORK, P ČO✱
  32. 32. ⇥ versus ·· ·· versus ····
  33. 33. • kó d menej náchylnýk chybám • optimalizovanýkó d • znovupoužite nýkomponentovýkó dľ • open-source • automatické testy • zvýšenáproduktivita… • …celého teamu Následky automatizácie
  34. 34. Riki Fridrich, fczbkk.com

×