Awesomation with Yeoman

How to automatize your workflow with Yeoman. Talk to FEMUG-Vale do Paraiba - Meetup #2

Transcript

1. Awesomation! (awesome + automation)! Frontend workflow! with Yeoman
2. Agenda What's Yo? But why should i use? Getting start Dammit! time
3. What’s yo?! Maybe a subtitle
4. "Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive." http://yeoman.io/
5. Toolbox! With three types of tools ! for improving productivity
6. Which tools?
7. Which tools? scaffolds Yo
8. Which tools? scaffolds Yo Build system Grunt
9. Which tools? scaffolds Yo Build system Grunt Package manager Bower
10. But why should i use it?! (remember.. there’s no silver bullet!)
11. The web’s most popular front-end template HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers
12. Scaffolding! Set up a project structure quickly
13. Generators! and sub-generators +900 generators available (officials + community)
14. Generators! and sub-generators +900 generators available (officials + community)
15. Generators! and sub-generators +900 generators available (officials + community)
16. Generators! and sub-generators +900 generators available (officials + community)
17. Generators! and sub-generators +900 generators available (officials + community)
18. Generators! and sub-generators +900 generators available (officials + community)
19. Generators! and sub-generators +900 generators available (officials + community)
20. Automation! Minification, compilation, unit testing, linting, etc
21. Automation! Minification, compilation, unit testing, linting, etc
22. Automation! Minification, compilation, unit testing, linting, etc
23. Automation! Minification, compilation, unit testing, linting, etc
24. grunt-responsive-image! Create multi-resolution images
25. grunt-contrib-imagemin! optimizations to jpg/png/gif
26. grunt-uncss! remove unused css
34. +40 generators
36. LEAN-GULP Coffeescript Stylus Jade
38. Management! Hunting, finding, downloading, and saving frameworks, libraries, assets, utilities
39. Old way! jQuery is outdated, let’s update! Open jQuery’s site Download new version Copy to app folder Update scripts tag x
42. With bower > bower install jquery —save
44. Getting start! Installation and HelloWorld
46. http://nodejs.org/download/
47. http://nodejs.org/download/
48. Installation > npm install -g yo
49. WebApp generator > npm install -g generator-webapp
50. WebApp generator > npm install -g generator-webapp
51. WebApp generator > npm install -g generator-webapp Yo!
52. > yo webapp
53. Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app. [?] What more would you like? (Press <space> to select) ! ›❯⬢ Bootstrap ⬡ Sass ⬡ Modernizr … ! create Gruntfile.js create package.json create .gitignore create .gitattributes create bower.json create .jshintrc create .editorconfig create app/favicon.ico … .. . ! I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself. ! … .. .
54. > grunt serve ! Running "serve" task ! Running "clean:server" (clean) task Cleaning .tmp...OK ! Running "concurrent:server" (concurrent) task ! Running "copy:styles" (copy) task Copied 1 files ! Done, without errors. ! Execution Time (2014-08-01 18:36:43 UTC) loading tasks 2ms ▇▇▇▇▇▇ 11% copy:styles 15ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 83% Total 18ms ! Running "autoprefixer:dist" (autoprefixer) task File .tmp/styles/main.css created. ! Running "connect:livereload" (connect) task Started connect web server on http://localhost:9000 ! Running "watch" task Waiting...
57. Your app
58. Your app Bower and npm components
59. Your app Bower and npm components Test structure (unit/karma/phanton/jasmine)
60. Your app Bower and npm components Test structure (unit/karma/phanton/jasmine) Config. files
61. bower.json
62. Grunfile.js
63. package.json
64. > grunt build ! Running "cssmin:generated" (cssmin) task File dist/styles/vendor.css created: 122.85 kB → 97.46 kB! File dist/styles/main.css created: 1.55 kB → 735 B! ! Running "uglify:generated" (uglify) task File dist/scripts/vendor.js created: 282.77 kB → 96.46 kB File dist/scripts/plugins.js created: 58.3 kB → 27.59 kB! File dist/scripts/main.js created: 30 B → 28 B! ! Running "usemin:css" (usemin) task ! Processing as CSS - dist/styles/a5896f90.main.css! Update the CSS to reference our revved images ! Processing as CSS - dist/styles/dfc57042.vendor.css! Update the CSS to reference our revved images ! Running "htmlmin:dist" (htmlmin) task Minified dist/404.html 4.46 kB → 4.18 kB Minified dist/index.html 2.8 kB → 2.12 kB ! Done, without errors.
66. Dammit! ! problems i’ve found in the way! … and some tips!
67. #1 - Images not found Task 'rev' doesn’t change all html files for rename assets for caching versions solution: Improve files path in task html: ['<%= config.dist %>/**/{,*/}*.html’],
68. #2 - angular minification broked When builded, angular controllers doesn’t work. solution: Add specific task for minify angular grunt-ngmin
 https://www.npmjs.org/package/grunt-ngmin
69. #3 - looking for a better generator Before start your project, looking for a generator that fits your needs. ! http://yeoman.io/generators
70. Thanks!! ! [github/fb/twitter]/jmscarpa joao.scarpa@gmail.com