Automating
Front-End Workflow

1
Mohammed Arif
A husband, father and a Front End Specialist at Sapient-Nitro.

https://github.com/mdarif
https://twitter.co...
AGENDA

 What is automation?
 Why automation?
 Old way of doing things
 New way?
 Yeoman
 Grunt
 Grunt Tips
 Bower...
WHAT IS AUTOMATION?

The technique of making a process, or a system operate

automatically.

4
WHY AUTOMATION?

To stay productive!

5
OLD WAY OF DOING THINGS?

•
•
•
•

Scaffolding
Download libraries
Download templates
Download frameworks

•
•
•
•
•

Watch...
NEW WAY?

7
YEOMAN

8
9
YEOMAN - Scaffold, write less with Yo

“Yeoman is a robust and opinionated client-side stack, comprising
tools and framewo...
YEOMAN - Scaffold, write less with Yo

• scaffolding, write less with Yo
• dependency management with Bower
• Wiring and i...
YEOMAN - Scaffold, write less with Yo
$ npm install -g yo

12
YEOMAN - Scaffold, write less with Yo
$ yo webapp

•
•
•
•
•
•
•
•

HTML5 Boilerplate
Twitter Bootstrap
Project Structure
...
14
GRUNT - Build, preview and test with Grunt

Grunt is a task-based command line build tool for JavaScript
projects.

http:/...
TASK-BASED?

•
•
•
•
•
•
•

Unit testing
JS linting
Concatenating/minifying
Image optimization
Replace scripts in html fil...
GRUNT TIPS

grunt-uncss
Remove unused CSS across your project at build time.

https://github.com/addyosmani/grunt-uncss

1...
GRUNT TIPS

Build directly from DevTools
grunt-devtools extension

https://github.com/vladikoff/grunt-devtools

18
Bower

19
BOWER - Manage dependencies with Bower

A package manager for the web.

20
BOWER - Manage dependencies with Bower

Runs over:
• Git
• HTTP(s)
• Zip
• npm

21
BOWER - Manage dependencies with Bower

$ bower list
$ bower search
$ bower search jquery
$ bower install
$ bower install ...
BOWER - Manage dependencies with Bower

• maintained by Twitter and the open-source
community
• configuration in bower.jso...
SHOWTIME

24
Q&A
Thank You!

26
Upcoming SlideShare
Loading in …5
×

Yeoman

2,878 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.

Published in: Technology

Yeoman

  1. 1. Automating Front-End Workflow 1
  2. 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. 3. AGENDA  What is automation?  Why automation?  Old way of doing things  New way?  Yeoman  Grunt  Grunt Tips  Bower  Showtime  Q&A 3
  4. 4. WHAT IS AUTOMATION? The technique of making a process, or a system operate automatically. 4
  5. 5. WHY AUTOMATION? To stay productive! 5
  6. 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. 7. NEW WAY? 7
  8. 8. YEOMAN 8
  9. 9. 9
  10. 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. 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. 12. YEOMAN - Scaffold, write less with Yo $ npm install -g yo 12
  13. 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. 14
  15. 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. 16. TASK-BASED? • • • • • • • Unit testing JS linting Concatenating/minifying Image optimization Replace scripts in html files SASS … 16
  17. 17. GRUNT TIPS grunt-uncss Remove unused CSS across your project at build time. https://github.com/addyosmani/grunt-uncss 17
  18. 18. GRUNT TIPS Build directly from DevTools grunt-devtools extension https://github.com/vladikoff/grunt-devtools 18
  19. 19. Bower 19
  20. 20. BOWER - Manage dependencies with Bower A package manager for the web. 20
  21. 21. BOWER - Manage dependencies with Bower Runs over: • Git • HTTP(s) • Zip • npm 21
  22. 22. BOWER - Manage dependencies with Bower $ bower list $ bower search $ bower search jquery $ bower install $ bower install jquery –save-dev 22
  23. 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. 24. SHOWTIME 24
  25. 25. Q&A
  26. 26. Thank You! 26

×