By zbudować stronę internetową, powszechnie polegamy na wielu bibliotekach, czy to w formie CSS czy JavaScript. Jeśli zbudowałbym małą stronę internetową, która będzie wyświetlać pokaz slajdów, na przykład, strona prawdopodobnie potrzebowałaby jQuery i wtyczki jQuery, Flexslider. Biblioteki te są zależnościami, od których zależy funkcjonowanie strony.
Podczas gdy dodawanie tych bibliotek powinno być łatwym zadaniem, gdy chodzi o stronę na dużą skalę, która wymaga większej ilości bibliotek, wszystko może być kłopotliwe i zabałaganione od samego początku. Być może będziesz musiał wędrować od jednego repozytorium do drugiego, pobierając każdą z bibliotek, rozpakowując pakiety i w końcu umieszczając je w swoim katalogu projektu.
Gdy nowa wersja stanie się dostępna, będziesz musiał robić to wszystko ponownie (brzmi jak dużo pracy, prawda?).
Zalecana lektura: Animate.CSS – CSS3 Library To Create Animation Easily
Jeśli brzmi to jak to, co robisz od wieków, ten artykuł może być wart przeczytania. Pokażemy ci poręczne narzędzie o nazwie Bower, które sprawia, że zarządzanie bibliotekami stron internetowych staje się dziecinnie proste. Sprawdźmy to.
Zaczynamy
Aby używać Bowera, musisz zainstalować Node.js. Ponieważ Bower jest oparty na Node.js, powinieneś być w stanie uruchomić Bower na każdej platformie: Windows, Mac i Linux.
Po zainstalowaniu Node.js otwórz Terminal (lub Command Prompt) i uruchom ten wiersz poleceń, aby zainstalować Bower.
npm install -g bower
Instalowanie bibliotek
Teraz jesteśmy gotowi do użycia Bowera. Zacznijmy od wyszukania biblioteki, którą chcemy umieścić w naszym katalogu projektu. Zakładając, że aktualnie znajdujesz się wewnątrz katalogu, możesz wpisać bower search {name of the library}. Tutaj, na przykład, szukałem Normalize.css, biblioteki, która sprawia, że styl elementu jest spójny we wszystkich przeglądarkach.
bower search normalize
Polecenie wyświetli listę wyników; nie tylko da nam oryginalny Normalize, ale także pokaże nam wersje Normalize, które zostały przekonwertowane na LESS, Sass, Stylus i inne platformy.
Gdy już wybraliśmy, którą z nich zainstalować, możemy wpisać bower install {{name of the repository}}. W tym przykładzie zainstaluję Normalize LESS oraz jQuery.
bower install normalize-less jquery
To polecenie pobierze najnowszą wersję normalize-less oraz jQuery i zapisze je w nowym folderze o nazwie bower_components; powinieneś teraz znaleźć utworzony folder w swoim katalogu projektu.
Alternatywnie, jeśli chcesz zainstalować starszą wersję biblioteki, możesz uruchomić polecenie, po którym podasz numer wersji, w ten sposób.
bower install jquery#1.10.0
Teraz, gdy mamy biblioteki, Normalize i jQuery, w katalogu naszego projektu, możemy ich użyć, odwołując się do jQuery z folderu bower_components w dokumencie HTML i importując Normalize LESS w innym arkuszu stylów LESS.
w HTML
<script src="bower_components/jquery/jquery.min.js"></script>
w LESS
@import "bower_components/normalize-less/normalize.less";
Jeśli któraś z bibliotek nie jest już używana w witrynie, można ją łatwo odinstalować za pomocą polecenia bower uninstall, tak jak w tym przypadku.
bower uninstall normalize-less
Uaktualnianie komponentów Bower
Powiedzmy, że pracujesz nad swoim projektem od kilku miesięcy, a niektóre biblioteki, których używasz (jak jQuery) wydały nową wersję. W takiej sytuacji możemy użyć Bowera, aby zaktualizować jQuery do najnowszej wersji. Ale najpierw sprawdźmy, czy nowa wersja została zarejestrowana w bower za pomocą polecenia bower list.
Najnowsza wersja jQuery, jak widać poniżej, to 2.1.1.
Aby zaktualizować jQuery, możemy wpisać bower update jquery. Po zakończeniu aktualizacji możemy ponownie uruchomić komendę bower list w celu sprawdzenia aktualnej zainstalowanej wersji. Poniżej, jak widać, mamy teraz najnowszą wersję jQuery.
Wrap Up
Bower jest naprawdę przydatnym narzędziem, które moim zdaniem powinieneś wykorzystać w swoim projekcie. To jak posiadanie AppStore, ale dla twojej strony internetowej – możemy instalować, aktualizować i usuwać biblioteki w wygodny sposób.
W następnym artykule zanurzymy się w Bower i odkryjemy kilka bardziej zaawansowanych funkcji. Więc bądźcie czujni.
