gulp vs grunt and bower
Post on 15-Apr-2017
188 Views
Preview:
TRANSCRIPT
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!
top related