Při vytváření webových stránek se běžně spoléháme na řadu knihoven, ať už ve formě CSS nebo JavaScriptu. Pokud bych například vytvořil malý web, který bude zobrazovat slideshow obrázků, web by pravděpodobně potřeboval knihovnu jQuery a zásuvný modul jQuery Flexslider. Tyto knihovny jsou závislostmi pro fungování webu.
Přestože by přidání těchto knihoven mělo být snadným úkolem, pokud jde o rozsáhlý web, který vyžaduje více knihoven, mohlo by být vše od začátku těžkopádné a zpackané. Možná budete muset procházet od jednoho úložiště k druhému, stahovat jednotlivé knihovny, extrahovat balíčky a nakonec je umístit do adresáře projektu.
Když bude k dispozici nová verze, budete to všechno muset dělat znovu (zní to jako spousta práce, že?).
Doporučená četba:
Pokud vám to zní jako to, co děláte už dlouho, možná stojí za to si přečíst tento článek: Animate.CSS – knihovna CSS3 pro snadné vytváření animací
Pokud vám to zní jako to, co děláte už dlouho, možná stojí za to si přečíst tento článek. Ukážeme vám v něm šikovný nástroj Bower, díky kterému je správa knihoven webových stránek hračka. Pojďme se na něj podívat.
Začínáme
Chcete-li používat Bower, musíte si nainstalovat Node.js. Protože je Bower založen na Node.js, měli byste být schopni spustit Bower na každé platformě:
npm install -g bower
Instalace knihoven
Jakmile máte nainstalovaný Node.js, otevřete Terminál (nebo Příkazový řádek) a spusťte tento příkazový řádek pro instalaci Bower.
npm install -g bower
Instalace knihoven
Teď jsme připraveni používat Bower. Začneme vyhledáním knihovny, kterou chceme umístit do adresáře našeho projektu. Za předpokladu, že se právě nacházíte uvnitř adresáře, můžete zadat bower search {name of the library}. Zde jsem například vyhledal Normalize.css, knihovnu, která zajišťuje konzistentní styl prvku ve všech prohlížečích.
bower search normalize
Příkaz vypíše několik výsledků; nejen že nám poskytne původní Normalize, ale také nám ukáže verze Normalize, které byly převedeny do LESS, Sass, Stylus a dalších platforem.
Jakmile jsme si vybrali, kterou z nich chceme nainstalovat, můžeme zadat bower install {{name of the repository}}. V tomto příkladu nainstaluji normalize LESS i jQuery.
bower install normalize-less jquery
Tento příkaz stáhne nejnovější verzi normalize-less a jQuery a uloží je do nové složky s názvem bower_components; vytvořenou složku byste nyní měli najít v adresáři projektu.
Pokud chcete nainstalovat starší verzi knihovny, můžete příkaz následovaný číslem verze spustit tímto způsobem.
bower install jquery#1.10.0
Teď, když máme knihovny Normalize a jQuery v adresáři projektu, můžeme je použít tak, že v dokumentu HTML odkážeme na jQuery ze složky bower_components a v jiném stylovém listu LESS importujeme Normalize LESS.
v HTML
<script src="bower_components/jquery/jquery.min.js"></script>
v LESS
@import "bower_components/normalize-less/normalize.less";
Pokud některou z knihoven již na webu nepoužíváme, můžeme ji snadno odinstalovat příkazem bower uninstall, například takto.
bower uninstall normalize-less
Aktualizace komponent Bower
Řekněme, že na svém projektu pracujete již několik měsíců a některé knihovny, které používáte (například jQuery), vydaly novou verzi. Za těchto okolností můžeme použít nástroj Bower k aktualizaci jQuery na nejnovější verzi. Nejprve však zkontrolujme, zda byla nová verze zaregistrována v bower pomocí příkazu bower list.
Nejnovější verze jQuery, jak vidíte níže, je 2.1.1.
Pro aktualizaci jQuery můžeme zadat příkaz bower update jquery. Po dokončení aktualizace můžete znovu spustit příkaz bower list a ověřit aktuální nainstalovanou verzi. Jak vidíte níže, máme nyní k dispozici nejnovější verzi jQuery.
Zabalení
Bower je opravdu šikovný nástroj, který byste podle mě měli ve svém projektu využít. Je to jako mít AppStore, ale pro věci na webu – můžeme pohodlně instalovat, aktualizovat a odstraňovat knihovny.
V příštím článku se do nástroje Bower ponoříme a prozkoumáme některé pokročilejší funkce. Zůstaňte tedy naladěni.
