Bower + Grunt + Colorbox

Dnes vám naznačím jak do projektů přidávám knihovny třetích stran  a jak spojuji css a js soubory, které následně minifukuji. Ukážeme se to na pluginu Colorbox který používám pro zobrazení detailu fotek v pop-up okně.

Nainstalujeme Colorbox přes bower:

Grunt task pro Colorbox

Pro zkopírování souborů používám balíček grunt-contrib-copy a pro minifikaci css do jednoho souboru grunt-contrib-cssmin:

Nejdůležitější část souboru Gruntfile.js:

Tím se nakopírují ohrají obrázky obrázky z ./bower_components/jquery-colorbox/example3/images/ do www/css/image, soubor bower_components/jquery-colorbox/example3/colorbox.css se zmnifikuje a připojí k souboru www/css/main.css a soubor bower_components/jquery-colorbox/jquery.colorbox-min.js připojíme k zminifikovanému souboru www/js/compiled.min.js

Do souboru s JS přidáme inicializaci Colorboxu (v mém případě main.js):

Parametr {rel:’gal’} označuje že se jedná o galerii. Pokud bude více odkazů s class=”colorbox” půjde mezi fotkami přepínat a nebude se muset pop-up okno zavírat.

Odkazu s obrázkem přidáme classu colorbox:

A je to 🙂

Jak nainstalovat Bower pod Windows

Minule jsme si nainstalovali Grunt a vytvořili package.json

Nyní se rovnou pustíme do instalace Boweru. Bower nainstalujeme globálně abychom ho mohli použít kdekoliv:

Také Bower nainstalujeme lokálně aby se přidal do projektu (package.json)

Inicializujeme Bower (vytvoří soubor bower.json):

 

Hledání balíčků

Existují 2 způsoby jak najít balíček pro Bower. Buď přes webový prohlížeč nebo přes příkazovou řádku.

Chcete li vyhledat balíček přes příkazovou řádku, použijte následující příkaz:

Pro vyhledání balíčku obsahující slovo jQuery použijeme příkaz:

Tento příkaz vrátí spoustu výsledků:

Každý balíček odkazuje na Git repozitář.

Instalace Balíčků