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.

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