1

Automating Front-End Workflow

2

https://github.com/mdarif

https://twitter.com/#!/arif_iq

http://in.linkedin.com/in/mohdarif

www.mohammedarif.com

Mohammed Arif

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

3

AGENDA

What is automation? Why automation?

Old way of doing things New way?

Yeoman Grunt

Grunt Tips Bower Showtime Q & A

4

WHAT IS AUTOMATION?

The technique of making a process, or a system operate

automatically.

5

WHY AUTOMATION?

To stay productive!

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…

7

NEW WAY?

8

YEOMAN

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

11

• 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

YEOMAN - Scaffold, write less with Yo

12

YEOMAN - Scaffold, write less with Yo

$ npm install -g yo

13

• HTML5 Boilerplate• Twitter Bootstrap• Project Structure• Mocha Tests• RequireJS (optional)• Modernizr (optional)• Build process• ...

YEOMAN - Scaffold, write less with Yo

$ yo webapp

14

15

GRUNT - Build, preview and test with Grunt

http://www.slideshare.net/arif_iq/grunt-22465541

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

16

TASK-BASED?

• Unit testing• JS linting• Concatenating/minifying• Image optimization• Replace scripts in html files• SASS• …

17

GRUNT TIPS

grunt-uncss

Remove unused CSS across your project at build time.

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

18

GRUNT TIPS

Build directly from DevTools

grunt-devtools extension

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

19

Bower

20

BOWER - Manage dependencies with Bower

A package manager for the web.

21

BOWER - Manage dependencies with Bower

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

22

BOWER - Manage dependencies with Bower

$ bower search

$ bower search jquery$ bower install

$ bower install jquery –save-dev

$ bower list

23

BOWER - Manage dependencies with Bower

https://egghead.io/lessons/bower-introduction-and-setup

• maintained by Twitter and the open-source community

• configuration in bower.json

24

SHOWTIME

Q & A

26

Thank You!