Grunt vs Gulp and Bower

Created by Kyryll KozakJS 099

Bower

Bower is package manager

It helps us with our dependencies

How to use?

npm install –g bower

COMMANDS

bower –versionbower search jquerybower info jquerybower install jquery#1.6.4 -SAVEbower list --path(how in fast way add url to index.html)bower uninstall jquery normalize.css -SAVE

The difference?

Answer

Tip: Two copies of dep a

Nested system

Flat system

About dependencies• We need file manifest• To create it we need to write bower init• And follow the instruction that appears• After we will see something something like in

the picture

ASD

ASD

Pros and ConsFlat• The simpler of the two designs. It's up to you to decide how much complexity you want to

deal with.• Dependency conflicts (AKA dependency hell)• Sometimes the only option for languages where you cannot load dependencies in isolation• Nested• No dependency conflicts• Encourages use of small, isolated modules• More complicated• Good for languages like JavaScript with first class scoping support for isolating dependencies

from each other• Installs multiple copies of dependencies (when necessary), so takes up more disk space

(though in practice this is rarely an issue because code is small).• Confuses users who use dependencies that aren't designed to be modular (e.g. 'Why do I

have five versions of jQuery in my browserify app?')

Кстати, при произношении слова "галп" не нужен мягкий знак, буква "л" твёрдая

Tip: Look in notebook (marked green)

About Gulp and …

• Gulp is task runner to automate everything that can be automated (i.e compile css/sass, optimize images, make a bundle and minify/transpite it)

• This description coming to Grunt too

The difference?

Tip: Look in notebook (marked green)

Answer

An example of Grunt task

Tip: Look in your notebook (5)

How Grunt works

What makes Gulp more comfortable to create build system?

Vinyl FS

Tip: 2 clicks

Tip: Look in your notebook (2)

How Gulp works

An example of Gulp task

Tip: Look in your notebook (2-3)

ASD

An example of Gulp task

Tip: (4)

Gulp stream parallelism???

Thank you!