Yeoman
Download as PPTX, PDF9 likes3,187 views
The document discusses automating front-end workflows using tools like Yeoman, Grunt, and Bower to enhance productivity. It outlines the transition from traditional manual processes to modern automation techniques that streamline project setup, dependency management, and build tasks. The presentation includes an agenda, definitions of key concepts, and practical tips for utilizing these tools effectively.
Yeoman
- 2. Mohammed Arif A husband, father and a Front End Specialist at Sapient-Nitro. https://github.com/mdarif https://twitter.com/#!/arif_iq http://in.linkedin.com/in/mohdarif www.mohammedarif.com 2
- 3. AGENDA What is automation? Why automation? Old way of doing things New way? Yeoman Grunt Grunt Tips Bower Showtime Q&A 3
- 4. WHAT IS AUTOMATION? The technique of making a process, or a system operate automatically. 4
- 5. WHY AUTOMATION? To stay productive! 5
- 6. OLD WAY OF DOING THINGS? • • • • Scaffolding Download libraries Download templates Download frameworks • • • • • Watch Sass / Less / Stylus Watch CoffeeScript Watch Jade / Haml LiveReload JS / CSS Linting… 6
- 7. NEW WAY? 7
- 8. YEOMAN 8
- 9. 9
- 10. YEOMAN - Scaffold, write less with Yo “Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications” http://yeoman.io/whyyeoman.html 10
- 11. YEOMAN - Scaffold, write less with Yo • scaffolding, write less with Yo • dependency management with Bower • Wiring and integration of a number of commonly used grunt tasks • build, preview and test with Grunt • maintained separately • play well together, all part of the Yeoman workflow 11
- 12. YEOMAN - Scaffold, write less with Yo $ npm install -g yo 12
- 13. YEOMAN - Scaffold, write less with Yo $ yo webapp • • • • • • • • HTML5 Boilerplate Twitter Bootstrap Project Structure Mocha Tests RequireJS (optional) Modernizr (optional) Build process ... 13
- 14. 14
- 15. GRUNT - Build, preview and test with Grunt Grunt is a task-based command line build tool for JavaScript projects. http://www.slideshare.net/arif_iq/grunt-22465541 15
- 16. TASK-BASED? • • • • • • • Unit testing JS linting Concatenating/minifying Image optimization Replace scripts in html files SASS … 16
- 17. GRUNT TIPS grunt-uncss Remove unused CSS across your project at build time. https://github.com/addyosmani/grunt-uncss 17
- 18. GRUNT TIPS Build directly from DevTools grunt-devtools extension https://github.com/vladikoff/grunt-devtools 18
- 19. Bower 19
- 20. BOWER - Manage dependencies with Bower A package manager for the web. 20
- 21. BOWER - Manage dependencies with Bower Runs over: • Git • HTTP(s) • Zip • npm 21
- 22. BOWER - Manage dependencies with Bower $ bower list $ bower search $ bower search jquery $ bower install $ bower install jquery –save-dev 22
- 23. BOWER - Manage dependencies with Bower • maintained by Twitter and the open-source community • configuration in bower.json https://egghead.io/lessons/bower-introduction-and-setup 23
- 24. SHOWTIME 24
- 25. Q&A
- 26. Thank You! 26