Your SlideShare is downloading. ×
Yeoman
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Yeoman

1,458
views

Published on

Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,458
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Automating Front-End Workflow 1
  • 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