Následující příspěvek napsal Dan Sundy ze společnosti Helios Design Labs. Dan vám jednak vysvětlí, jak používat Bower, a jednak uvede argumenty pro jeho používání z pohledu někoho, kdo se tomuto nápadu zpočátku bránil.
Když jsem poprvé začal pracovat s Bowerem, nechápal jsem jeho přitažlivost. „Vážně?“ Pomyslel jsem si. „Teď je příliš mnoho práce stáhnout a rozbalit nějaký soubor?“ Také jsem nebyl příliš nadšený z toho, že se mi do mozku, který už tak praskal ve švech, cpe hromada nových příkazů Git, Grunt, Gulp, Jekyll, Node atd.
Té půl roku staré verzi sebe sama bych řekl dvě věci. Zaprvé, Bower toho umí trochu víc než jen stáhnout jeden nebo dva soubory. Za druhé, strávit hodinu učením se nástroje, který odstraní opakovanou úlohu, se vyplatí.
Nejdřív to nejdůležitější:
Pro nezasvěcené: Bower je správce balíčků. Umí dobře spravovat balíčky – cokoli, co závisí na externím autorovi. Dobrým příkladem jsou frameworky CSS jako Bootstrap, knihovny jako jQuery, pluginy jQuery nebo frameworky JavaScript jako Angular. Asi nejlépe to říká oficiální web Bower.io:
Webové stránky se skládají ze spousty věcí – frameworků, knihoven, prostředků, nástrojů a duh. Bower všechny tyto věci spravuje za vás.
Bower funguje tak, že načítá a instaluje balíčky odevšad, stará se o lovení, hledání, stahování a ukládání věcí, které hledáte.
Předpoklady
Než začnete pracovat s Bowerem, budete potřebovat několik věcí:
- Příkazový řádek. Ano, je to nástroj pro příkazový řádek (no tak, není to tak děsivé).
- Node a NPM. Bower je modul Node, takže k jeho získání potřebujete NPM.
- Git. Balíčky Bower jsou repozitáře Git. Bower používá Git, aby pochopil, kde se balíček nachází, v jaké je verzi – takové věci.
- Globální instalace. Technicky vzato byste jej mohli nainstalovat do každého projektu, ale pravděpodobně jej budete chtít mít všude.
K globální instalaci Bower:
$ npm install -g bowerPoznámka: V závislosti na nastavení budete možná muset použít `sudo npm install -g bower` pro globální instalaci.
Základy
Na začátek si představte adresářovou strukturu nového webu. Moje obvykle vypadají nějak takto:
|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.mdJe zde složka `src`, kde se provádí většina vývojové práce. Úloha sestavení Gulp nakonec vše připraví a zkompiluje náš optimalizovaný kód do složky `dist` připravené k produkci.
Řekněme, že chcete do tohoto projektu zahrnout jQuery. Obvykle byste šli na stránku jquery.com, našli a klikli na správný odkaz ke stažení, pak rozbalili a vložili soubory do správného adresáře.
Pomocí nástroje Bower stačí spustit následující příkaz:
$ bower install jqueryTeď se objevil adresář `bower_components` se složkou `jquery`.
|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.mdjQuery usnadnilo získání svého kódu vytvořením a registrací balíčku pro Bower. Totéž udělala většina populárních knihoven a frameworků. Pokud si chcete ověřit, že požadované aktivum je balíčkem Bower, můžete provést vyhledávání:
$ bower search <package-name>Pokud není zaregistrováno, je stále možné uchopit repozitáře s koncovými body git takto:
$ bower install git://github.com/example-user/example-package.gitPokročilé: Pokud chcete být nároční, můžete si nainstalovat i soukromé repozitáře, ke kterým máte přístup. Podívejte se na tento videonávod Roba Dodsona.
Tady je několik dalších základních příkazů, které můžete použít k prohlížení a správě nainstalovaných prostředků.
Seznam všech vašich balíčků:
$ bower listZjistěte informace o každém balíčku, který jste nainstalovali:
$ bower info <package-name>Zkontrolujte, zda nejsou k dispozici aktualizace:
$ bower check-newPokud jsou k dispozici, aktualizujte balíček:
$ bower update <package-name>Ale možná aktualizace na nejnovější verzi něco rozbila.
Nainstalujte nějakou konkrétní verzi – starou nebo novou:
$ bower install <package-name>#<version>Tento seznam rozhodně není vyčerpávající. Pokud máte zájem začít, doporučuji vytvořit zkušební projekt a projít si některý z mnoha návodů, které lze najít na internetu. Tento od Treehouse je skvělý: Začínáme s Bowerem. Pak můžete proniknout do všech příkazů tím, že se podíváte na Bowerovo API.
Hej, ale počkej, je toho víc!“
Malý tým vývojářů, se kterým pracuji, používá Bower už asi rok. Správa balíčků pomocí příkazového řádku je sice skvělá, ale dokud jsme nezačali používat soubory `bower.json` a `.bowerrc`, nebyl jsem přesvědčen, že je to pravda.
.bowerrc
Soubor `.bowerrc` může dělat řadu věcí, ale většinou jsem viděl, že se používá ke změně názvu a umístění adresáře `bower_components`. (To mě potěšilo, protože jsem nesnášel, když se mi ten náhodný adresář `bower_components` povaloval v kořenovém adresáři projektu).
Takto může vypadat soubor `.bowerrc`:
{ "directory": "src/components"}Volba adresář posílá balíčky do umístění, které dává největší smysl – v tomto případě do adresáře `src/`. Podívejte se na novou strukturu projektu:
|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.mdVšimněte si, že adresář `bower_components/` zmizel a v adresáři `src/` je adresář `components/`.
Pokročilé:
Jak nám může pomoci soubor `bower.json`?
bower.json
Soubor `bower.json` vypadá podobně jako `package.json` v Node. Je to soubor manifestu, který umožňuje specifikovat volby. Podívejme se na příklad (který lze vygenerovat spuštěním příkazu bower init):
{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}Mnoho těchto voleb je zde pro případ, že registrujete toto úložiště jako balíček Bower. Ale vidíte ten objekt devDependencies úplně dole? Tento objekt se automaticky aktualizuje, pokud k příkazu Bower připojíte --save-dev, například takto:
$ bower install jquery --save-devNyní, pokud kolega kodér spustí `bower install`, počítač nainstaluje vše ze seznamu devDependencies do složky uvedené v `.bowerrc`. Stejně tak pokud jeden z vývojářů přidá balíček nebo aktualizuje verzi balíčku pomocí --save-dev, může celý tým synchronizovat své prostředky pomocí bower install (po stažení nejnovější verze souboru `bower.json`).
Protože díky souboru `bower.json` odpadla veškerá práce s lovením a shromažďováním, není již potřeba verzovat žádné z těchto prostředků. Složku `components/` lze přidat do souboru `.gitignore` a udržet tak úložiště štíhlé a průměrné.
*.DS_Store.sass-cachenode_modules/dist/src/components/Výstřel na rozloučenou
Poslouchal jsem jeden díl svého oblíbeného podcastu o webovém vývoji (wink, wink) a moderátoři se bavili o tom, jestli je Bower skutečně užitečný, nebo je to jen přechodný výstřelek. Přemýšleli, jestli je jeho smyslem usnadnit stahování, nebo jestli slouží k aktualizaci verzí vašich knihoven, jako to dělají ruby gemy. Mluvili o tom, že je to „front-endy NPM“ (parafrázuji).
Krásné je, že to dělá všechny tyto věci. Můžeš ho používat pro stahování a udržování aktualizovaného kódu, ale můžeš to posunout dál. Bower vám může pomoci udržovat knihovny a frameworky projektu synchronizované nebo jej můžete integrovat s dalšími nástroji, jako je Yeoman, a ušetřit tak ještě více času při nastavování vývojového prostředí. Navíc můžete vytvářet a registrovat vlastní balíčky Bower, abyste je mohli rychle (a bezpečně) instalovat a aktualizovat ve všech svých projektech.
A pokud jde o otázku, kvůli které začala diskuse: Bower byste neměli používat k instalaci WordPressu a WordPress by neměl být ve složce `bower_components`. Ale mohli byste použít Bower v rámci tématu WordPressu ke správě externích prostředků (jen byste nenačítali knihovny jako jQuery, které jsou již součástí jádra WordPressu).