Front End Development Workflow Tools

@ahmehriAhmed Elmehri

Front EndIS NOT

Back End

2

JS ProjectIS NOT

Java Project

3

Doesn’t fit

Not the right tool

4

Development Workflow

Prepare project structure

Scaffolding

5

Build project Manage dependencies

Scaffolding tool Build toolTask runner Package Manager

Development Workflow Tools

6

Scaffoldinghttps://flic.kr/p/2Tjgck

Yeoman the Scaffolding Tool

8

Yeoman the Scaffolding Tool

9

Yeoman the Scaffolding Tool

10

YO the Command Line Interface

11

Example

Dependency Management

https://flic.kr/p/obcZW9

npm the Package Manager

14

npm the Package Manager

15

npm the Package Manager

16

npm the Package Manager

17

Bower the Package Manager

18

Bower the Package Manager

19

Bower the Package Manager

20

Example

Building

https://flic.kr/p/bJT8og

Grunt the Build Tool

23

Grunt the Build Tool

24

Grunt the Build Tool

25

Example

Thank You@ahmehriAhmed Elmehri

#front-end-dev-workflow-tools