Przewodnik dla początkujących: Getting Started with Bower Package Manager

Bower to front-endowy menedżer pakietów zbudowany przez Twittera. Znany również jako menedżer pakietów dla sieci, bower jest używany w nowoczesnych projektach open source i closed source do rozwiązywania wielu powtarzających się problemów.

Ten artykuł poprowadzi Cię przez podstawowe użycie bowera i zaawansowane użycie dla środowiska zespołowego. Podzielę się również moim osobistym przepływem pracy, gdy mam do czynienia z bowerem z zespołem programistów.

Problemy, które rozwiązuje bower

Rozwijanie strony internetowej lub aplikacji internetowej wymaga obecnie użycia wielu frameworków front-end, takich jak Bootstrap, jQuery, Angular, itp.

Pobieranie każdego z tych pakietów wymaga nawigacji po odpowiedniej stronie internetowej, znalezienia odpowiedniej wersji, pobrania jej, rozpakowania i w końcu przeniesienia plików głównych do folderu dostawcy. (np.: plik main w pakiecie jquery to jquery.js)
Po pobraniu plików do swojego repozytorium, musisz ręcznie odwiedzić wszystkie powyższe strony (jquery.com, angularjs.com, bootstrap.com) aby sprawdzić aktualizacje i zgadnij co? Jeśli jest aktualizacja, musisz powtórzyć krok 1 dla każdego pakietu / aktualizacji.
Załóżmy, że będziemy używać Bootstrap, który wymaga jQuery (zwanej zależnością). Kiedy wejdziesz na stronę getbootstrap.com, aby go pobrać, będziesz musiał przejść na stronę jquery.com, aby pobrać również jquery.

Podsumowując, bower pomaga zarządzać pakietami front-end. Pomaga je pobierać, aktualizować i rozwiązywać ich zależności.

Istnieją inne korzyści z używania bowera, które omówimy w dalszej części artykułu, ale to są główne problemy, które bower rozwiązuje za nas!

Instalacja i użycie

Instalowanie bower

Bower jest modułem węzła i może być zainstalowany za pomocą następującego polecenia:

npm install -g bower

To zainstaluje bower globalnie w twoim systemie.

Jeśli nie masz zainstalowanego node na swoim komputerze, musisz go pobrać z nodejs.org.

Instalowanie pakietów

Dla celów tego tutoriala, użyjemy bower do zainstalowania bootstrapa. Proces będzie działał dla każdego innego pakietu.

bower install bootstrap

To zainstaluje bootstrap w nowo utworzonym folderze /bower_components (na poziomie głównym).

Zauważ, że to zainstaluje bootstrap 3.2.x, który jest najnowszą wersją w czasie pisania tego artykułu. Jeśli chcemy zainstalować najnowszą wersję w 2.x, musimy uruchomić:

bower install bootstrap#2

Możemy również określić dokładną wersję za pomocą

bower install bootstrap#2.2

Zauważ również, że ponieważ bootstrap zależy od jQuery, uruchomienie któregokolwiek z poprzednich poleceń automatycznie zainstaluje również jQuery, aby rozwiązać zależności bootstrapa.

Uaktualnianie pakietów

Jeśli chcemy uaktualnić wszystkie nasze pakiety, musimy po prostu wykonać następującą komendę:

bower update

Dołączanie skryptów

Ostatnim krokiem będzie dołączenie pobranych stylów i skryptów. Ponieważ wszystkie one rezydują wewnątrz folderu /bower_components, będziemy musieli napisać następujące polecenie:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Wspólny przepływ pracy w środowisku zespołowym

Po użyciu bowera w powyższy minimalistyczny sposób, zdajemy sobie sprawę, że wprowadza on nowe problemy podczas pracy z kontrolą źródła i/lub w środowisku zespołowym.

Bower nie tylko pobiera główne pliki dystrybucji, ale także pobiera całe repozytorium jquery, bootstrap, itp. To może nadymać twoją historię kontroli rewizji i jest całkowicie niezalecane.
Także główne pliki dystrybucji (dist/jquery.js, dist/css/bootstrap.css) nie są zminifikowane, a bower nigdy nie zminifikuje plików dystrybucji, ponieważ jest menedżerem pakietów, a nie narzędziem do budowania.
Musisz ręcznie upewnić się, że ładujesz jquery przed załadowaniem bootstrapa (ponieważ bootstrap ma jquery jako zależność).
Musisz ręcznie dodać nowy tag <script> dla każdego nowego pakietu (i może nowy <link rel=”stylesheet”/> jeśli zawiera pliki css.

Krok 1: Zainstaluj bower

i upewnij się, że każda osoba w twoim zespole również zainstaluje go globalnie.

Krok 2: Wyklucz bower_components z kontroli rewizji

Dodaj bower_components do swojego .gitignore. To poinstruuje Gita, aby zignorował wszystkie pliki bower_components. W ten sposób każdy programista (w zespole) będzie miał lokalną kopię wymaganych bibliotek front-end. Nie przejmuj się tym, że każdy deweloper ma inną wersję. Naprawimy to za chwilę.

Krok 3: Zainstaluj wymagane pakiety

Zainstaluj wymagane pakiety front-end, powiedzmy jQuery i bootstrap.

bower install jquery#1 bootstrap --save

Flaga --save poinstruuje bower, aby utworzył (jeśli nie istnieje) plik bower.json i umieścił w nim zainstalowane pakiety. To jest przykład wygenerowanego pliku bower.json:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

zauważ, że istnieje ograniczenie wersji ~3.2.0. Zapewni to, że wszyscy członkowie zespołu będą pracować na tej samej wersji bootstrapa, tylda oznacza, że powód powinien być w miarę blisko podanego powodu.

Krok 4: Członkowie zespołu mogą teraz uruchomić: bower install

Gdy każdy programista, który ma dostęp do repozytorium uruchomi bower install, zainstaluje wszystkie zależności (bootstrap i jquery w tym przypadku).

Do pozostałych kroków potrzebujemy Grunt lub Gulp.

Krok 5: Integracja z narzędziami do budowania

Grunt i Gulp są narzędziami do budowania, używanymi do automatyzacji typowych i powtarzających się zadań, takich jak minifikacja skryptów, optymalizacja obrazów, minifikacja arkuszy stylów, kompilacja less/sass/stylus. Bower dobrze współgra z Grunt/Gulp dzięki gotowym wtyczkom. W tym tutorialu zajmę się Gruntem, jednak znajdziesz podobną alternatywę dla Gulpa.

Grunt posiada wtyczkę o nazwie grunt-bower-concat, która kompiluje wszystkie główne pliki dla każdego komponentu bowera, który masz w pliku bower.js. Które można następnie użyć Grunt do minifikacji (uglify), w wyniku czego bower.min.js.

Grunt bower concat przykładowa konfiguracja:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Uwaga: jeśli używasz Gulp, podobna wtyczka istnieje pod adresem: https://github.com/ck86/main-bower-files/

Uwaga: Dla Ruby on Rails i innych, sprawdź następujący link: http://bower.io/docs/tools/

Krok 6: Dołącz skrypty

Dzięki poniższym skryptom, dołączasz swoje skrypty raz i za każdym razem, gdy dodasz nowy pakiet front-end, będzie on automatycznie konkatenowany w odpowiednim pliku (bower.css lub bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Krok 7: Więcej automatyzacji bower

Możesz dalej automatyzować bower. Załóżmy, że pracujesz w zespole i dodajesz nowy komponent bower (bower install typeahead.js). Nie chcesz wysyłać do wszystkich maili z informacją, żeby uruchomili bower install. Możemy to zautomatyzować za pomocą grunt-watch i grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

To co się tutaj dzieje, to że za każdym razem gdy edytujesz plik bower.json, grunt automatycznie uruchamia polecenie bower install. Kiedy zatwierdzisz swoje zmiany, a twój współpracownik wyciągnie twój kod, grunt-watch wykryje zmianę w bower.json, która następnie automatycznie uruchomi polecenie bower install.

Jak dostosowuję bower w moim własnym workflow

Jeśli chodzi o menedżerów pakietów, używam ich wiele w moim workflow. Używam npm do zarządzania gruntem i jego wtyczkami. Composer do zarządzania moimi bibliotekami PHP, bower do zarządzania moimi pakietami front-end i wreszcie ruby gems do zarządzania Capistrano (pakiet, który jest używany do automatyzacji wdrożeń).

Postanowiłem, że chcę, aby npm był main menedżerem pakietów. Zacząłem więc owijać wszystkie główne polecenia wewnątrz sekcji skryptu mojego package.json. Na przykład:

npm run migrate: migruje bazę danych i generuje pliki migracyjne (specyficzne dla PHP)
npm test: uruchamia testy jednostkowe
npm run protractor: uruchamia testy end-2-end
npm run deploy-staging: deploys code to staging machines
npm run deploy-production: deploys code to production machines
npm start: runs npm install (pre-start), bower update (post-install) and finally grunt

Here’s what’s happening behind the scenes. Rozważmy następujący plik package.json:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Jeśli spojrzysz na sekcję skryptów, zobaczysz, że prestart: uruchamiamy npm install. Ponieważ plik package.json jest zawarty w naszym repozytorium, jeśli ktoś doda nową zależność devDependency, musimy być w stanie łatwo zainstalować tę samą wersję. (Zauważ, że pre start jest pierwszym poleceniem wywoływanym po uruchomieniu npm start).

post install (które jest wywoływane przez npm install), uruchamia następujące polecenie: bower update --unsafe-perm(--unsafe-perm został dodany tylko dlatego, że bower-update zawodził na Macu). To sprawi, że wszystkie nasze pakiety front-end będą aktualne.

start:i w końcu polecenie start uruchamia grunt.

Po takim ustawieniu, kiedy jakikolwiek programista z twojego zespołu chce rozpocząć pracę nad projektem, po prostu przechodzi do katalogu projektu i uruchamia npm start, aby od razu rozpocząć pracę.

Używanie tego podejścia jest bardzo efektywne, ponieważ możesz dołączyć inne skrypty do uruchomienia z npm, takie jak npm run migrate, npm run deploy-staging, itp.

Używając tego podejścia, nie tylko zachęcamy do używania wiersza poleceń i automatyzacji, ale w rzeczywistości sprawiamy, że jest to jednolite.

Widzisz, że powiązaliśmy npm install z bower update. Możesz pójść o krok dalej i powiązać wszystkie inne menedżery pakietów z npm install. W takim przypadku, uruchomienie npm install uruchomiłoby wszystkie następujące polecenia:

bower update
composer update --no-dev
gem update

Zakończenie

Bower jest niesamowitym narzędziem, które rozwiązuje podstawowe problemy z nowoczesnymi aplikacjami internetowymi. Wszyscy ludzie są zachęcani do korzystania z niego (i nawet nowe Visual Studio jest wyposażone w Bower i Grunt/Gulp).

Można go łatwo skonfigurować podczas samodzielnego tworzenia aplikacji, jednak jeśli pracujesz w zespole, musisz wykonać kroki przedstawione w tym artykule, aby zapewnić płynny przepływ pracy pomiędzy wszystkimi programistami w zespole.

Arquidia Mantina