Co jest takiego wspaniałego w Bower?

Poniżej znajduje się gościnny wpis Dana Sundy’ego z Helios Design Labs. Dan zamierza zarówno wyjaśnić, jak używać Bowera, jak i przedstawić argumenty za tym, aby to zrobić, z perspektywy kogoś, kto na początku opierał się temu pomysłowi.

Kiedy po raz pierwszy zacząłem pracować z Bowerem, nie do końca rozumiałem jego atrakcyjność. „Poważnie?” pomyślałem. „Teraz to zbyt dużo pracy, aby pobrać i rozpakować plik?”. Nie byłem też super podekscytowany wtłaczaniem garści nowych komend do mózgu, który już pęczniał w szwach od Git, Grunt, Gulp, Jekyll, Node, itd.

Są dwie rzeczy, które powiedziałbym tej wersji siebie sprzed pół roku. Po pierwsze, Bower może zrobić trochę więcej niż pobrać plik lub dwa. Po drugie, spędzenie godziny na nauce narzędzia, które wyeliminuje powtarzające się zadanie, jest tego warte.

Rzeczy pierwsze: What the Heck is Bower?

Dla niewtajemniczonych, Bower jest menedżerem pakietów. Jest dobry w, cóż, zarządzaniu pakietami – wszystkim, co zależy od zewnętrznego autora. Dobrymi przykładami są frameworki CSS jak Bootstrap, biblioteki jak jQuery, wtyczki jQuery, czy frameworki JavaScript jak Angular. Oficjalna strona Bower, Bower.io, prawdopodobnie mówi o tym najlepiej:

Strony internetowe składają się z wielu rzeczy – frameworków, bibliotek, zasobów, narzędzi i tęczy. Bower zarządza tymi wszystkimi rzeczami za Ciebie.

Bower działa poprzez pobieranie i instalowanie pakietów z całego świata, dbając o polowanie, znajdowanie, pobieranie i zapisywanie rzeczy, których szukasz.

Wymagania wstępne

Jest kilka rzeczy, których będziesz potrzebował, zanim zaczniesz pracować z Bower:

• Wiersz poleceń. Yup, to narzędzie wiersza poleceń (c’mon to nie jest takie straszne).
• Node i NPM. Bower jest modułem Node, więc aby go uzyskać potrzebujesz NPM.
• Git. Pakiety Bower są repozytoriami Git. Bower używa Git aby zrozumieć gdzie jest pakiet, na jakiej wersji jest – tego typu rzeczy.
• Instalacja globalna. Technicznie mógłbyś zainstalować go w każdym projekcie, ale prawdopodobnie będziesz chciał mieć go wszędzie.

Aby zainstalować Bower globalnie:

$ npm install -g bower

Uwaga: W zależności od twojej konfiguracji możesz musieć użyć `sudo npm install -g bower` aby zainstalować go globalnie.

Podstawy

Aby zacząć, zobrazuj strukturę katalogów dla nowej strony. Mój zazwyczaj wygląda tak:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Tam znajduje się folder `src`, w którym wykonywana jest większość prac rozwojowych. Zadanie budowania Gulpa ostatecznie przygotuje wszystko i skompiluje nasz zoptymalizowany kod do folderu `dist` gotowego do produkcji.

Powiedzmy, że chcesz włączyć jQuery do tego projektu. Zazwyczaj wchodzisz na stronę jquery.com, znajdujesz i klikasz na właściwy link do pobrania, następnie rozpakowujesz i umieszczasz pliki w odpowiednim katalogu.

W przypadku Bower wystarczy uruchomić następującą komendę:

$ bower install jquery

Teraz pojawił się katalog `bower_components` z folderem `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.md

jQuery ułatwiło zdobycie swojego kodu, tworząc i rejestrując pakiet dla Bower. Większość popularnych bibliotek i frameworków zrobiła to samo. Jeśli chcesz sprawdzić, czy zasób, który chcesz, jest pakietem Bower, możesz wykonać wyszukiwanie:

$ bower search <package-name>

Jeśli nie jest zarejestrowany, nadal możliwe jest pobranie repozytoriów z punktami końcowymi git w ten sposób:

$ bower install git://github.com/example-user/example-package.git

Zaawansowane: Jeśli chcesz uzyskać fantazję, możesz nawet zainstalować prywatne repozytoria, do których masz dostęp. Sprawdź ten samouczek wideo autorstwa Roba Dodsona.

Oto kilka innych podstawowych poleceń, których możesz użyć do przeglądania i zarządzania aktywami, które masz zainstalowane.

Listuj wszystkie swoje pakiety:

$ bower list

Uzyskaj informacje o każdym pakiecie, który zainstalowałeś:

$ bower info <package-name>

Sprawdź aktualizacje z:

$ bower check-new

Wtedy, jeśli są aktualizacje, zaktualizuj pakiet:

$ bower update <package-name>

Ale może aktualizacja do najnowszej wersji coś zepsuła.

Zainstaluj dowolną konkretną wersję-old or new-with:

$ bower install <package-name>#<version>

To zdecydowanie nie jest wyczerpująca lista. Jeśli jesteś zainteresowany rozpoczęciem, polecam zrobić projekt testowy i pracować przez jeden z wielu tutoriali, które można znaleźć w Internecie. Ten autorstwa Treehouse jest świetny: Getting Started with Bower. Następnie możesz zagłębić się we wszystkie polecenia, sprawdzając API Bowera.

Hej, ale poczekaj, jest więcej!

Mały zespół programistów, z którym pracuję, używa Bowera od mniej więcej roku. Podczas gdy zarządzanie pakietami poprzez linię poleceń było świetne, nie byłem przekonany, dopóki nie zaczęliśmy używać plików `bower.json` i `.bowerrc`.

.bowerrc

Plik `.bowerrc` może robić wiele rzeczy, ale najczęściej widziałem go używanego do zmiany nazwy i lokalizacji katalogu `bower_components`. (To mnie ucieszyło, ponieważ nienawidziłem mieć tego losowego katalogu `bower_components` pływającego w korzeniu projektu).

Oto jak może wyglądać plik `.bowerrc`:

{ "directory": "src/components"}

Opcja directory wysyła pakiety do lokalizacji, która ma największy sens – w tym przypadku, do katalogu `src/`. Spójrz na nową strukturę 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.md

Zauważ, że folder `bower_components/` zniknął i jest folder `components/` w katalogu `src/`.

Zaawansowane: Dobrym pomysłem jest użycie czegoś takiego jak gulp-usemin lub grunt-usemin, aby zadbać o konkatenację i minifikację dla wszystkich dodatkowych stylów i skryptów.

Więc jak plik `bower.json` może nam pomóc?

bower.json

Plik `bower.json` wygląda bardzo podobnie do `package.json` Node’a. Jest to plik manifestu, który pozwala na określenie opcji. Spójrzmy na przykład (który może być wygenerowany przez uruchomienie 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" }}

Wiele z tych opcji jest tam na wypadek, gdybyś rejestrował to repo jako pakiet Bower. Ale widzisz obiekt devDependencies na samym dole? Ten obiekt zostanie zaktualizowany automatycznie, jeśli dodasz --save-dev do komendy Bower, jak poniżej:

$ bower install jquery --save-dev

Teraz, jeśli inny programista uruchomi `bower install`, komputer zainstaluje wszystko z listy devDependencies w folderze określonym w `.bowerrc`. Podobnie, jeśli jeden programista doda pakiet lub zaktualizuje wersję pakietu używając --save-dev, cały zespół może zsynchronizować swoje zasoby używając bower install (po ściągnięciu najnowszej wersji pliku `bower.json`).

Odkąd cała praca polowania i zbierania została wyeliminowana z plikiem `bower.json`, nie ma już potrzeby wersjonowania żadnego z tych zasobów. Folder `components/` może być dodany do pliku `.gitignore`, aby zachować swoje repozytorium szczupłym i średnim.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Parting Shot

Słuchałem odcinka mojego ulubionego podcastu web dev (wink, wink) i gospodarze rozmawiali o tym, czy Bower jest rzeczywiście użyteczny, czy to tylko chwilowa moda. Zastanawiali się, czy jego celem jest ułatwienie ściągania plików, czy też jest on używany do aktualizacji wersji bibliotek, tak jak robią to rubinowe gemy. Mówili o tym, że jest to „front-endy NPM” (parafrazuję).

Piękno polega na tym, że robi wszystkie te rzeczy. Możesz go używać do pobierania i aktualizowania kodu, ale możesz pójść dalej. Bower może pomóc Ci utrzymać biblioteki projektu i frameworki w synchronizacji, lub zintegrować go z innymi narzędziami, takimi jak Yeoman, aby odciąć jeszcze więcej czasu od Twojej konfiguracji dev. Dodatkowo, możesz tworzyć i rejestrować własne pakiety Bower, aby móc je szybko (i bezpiecznie) instalować i aktualizować we wszystkich swoich projektach.

Oh, a propos pytania, od którego zaczęła się ta dyskusja: Nie użyłbyś Bowera do zainstalowania WordPressa, a WordPress nie powinien znajdować się w twoim folderze `bower_components`. Ale możesz użyć Bower w swoim motywie WordPressa, aby zarządzać zewnętrznymi zasobami (po prostu nie ładuj bibliotek takich jak jQuery, które są już zawarte w rdzeniu WordPressa).

.