Gulp, Bower i Yeoman – środowisko pracy front-end developera

Gulp, Bower i Yeoman – środowisko pracy front-end developera

Lubimy upraszczać. Podejmując pracę programistyczną chcemy w miarę możliwości ograniczać ręczną robotę. Zależy nam również na wykorzystaniu aktualnych standardów i metod postępowania. Przez lata działalności wypracowałem idealne dla siebie środowisko do tworzenia stron internetowych o czym pisałem już wcześniej. Dziś chciałbym nie tylko pokazać moje ulubione narzędzia lecz przede wszystkim nauczyć Cię z nich korzystać. Bez zbędnego gadania.

Wstęp

Nie będziemy zagłębiać się w szczegóły bo większość z poniższych narzędzi to temat na osobny wpis. Tworząc projekt chcemy ominąć kwestie konfiguracji, prób i błędów. Nie znaczy to jednak, że wszystko należy robić po omacku. Warto wiedzieć, które narzędzie za co odpowiada i jak współpracuje z pozostałymi.

1. npm

Serwer lokalny w środowisku Node.js, który za chwilę utworzymy, potrzebuje do pracy pewnych składników. Są to na przykład wtyczki do automatycznego odświeżania strony po zapisaniu pliku lub minifikowania plików do produkcji. Node packaged modules to system pozwalający instalować potrzebne komponenty – te działające po stronie serwera.

2. Bower

Co w przypadku gdy chcesz do projektu zaciągnąć jQuery lub swoją ulubioną wtyczkę do pokazu slajdów? Jeżeli do tej pory ściągałeś i dołączałeś wszystkie pliki ręcznie, teraz przeżyjesz rewolucję. Do zarządzania komponentami działającymi po stronie klienta służy właśnie Bower. Przy pomocy jednej komendy terminala ściągniesz wszystkie potrzebne pliki z repozytorium.

3. Gulp

Głównym jego zadaniem jest zautomatyzowanie wielu czynności, jakie musi wykonać każdy programista w trakcie swojej pracy. System ten pozwala definiować zadania, które mają być wykonywane w odpowiednich momentach, na przykład podczas uruchamiania serwera lub podczas zapisywania pliku. Dzięki niemu masa zadań spada z ramion programisty a ten może skupić się na wykonywaniu swojej faktycznej pracy. Gulp to potężne i wydajne narzędzie, które na stałe zagościło w moim procesie tworzenia stron.

4. Yeoman

Kolejne sprytne i użyteczne narzędzie pracy webdevelopera. Yeoman to pewnego rodzaju kreator projektów, który w automatyczny sposób utworzy za nas strukturę katalogów i niezbędne pliki startowe zgodnie z szeroko rozumianymi „dobrymi praktykami”.

Wszystko w jednym

W tym miejscu przejdziemy do sedna sprawy. Warto znać te narzędzia od podstaw i wiedzieć jakie mają możliwości. Jednak w codziennej pracy nie wyobrażam sobie konfigurować wszystkiego od zera, dodawać pojedynczych tasków i ponownie sprawdzać czy wszystko działa.  Rozpoczynając nowy projekt zależy nam na tym aby w 5 sekund przygotować sobie środowisko gotowe do kodowania.

Na szczęście istnieją dobrzy ludzie tworzący społeczność open source i udostępniają nam swoje prace. Mianowicie mowa o Yeoman WebApp generator. Repozytorium zawiera wszystkie niezbędne narzędzia do pracy. Dzięki takiemu rozwiązaniu nie musimy męczyć się z konfiguracją każdego z osobna. Wystarczy zaciągnąć całą paczkę z GitHuba i cieszyć się jej wspaniałymi możliwościami. Oczywiście takich generatorów powstało już wiele, jednak ten najbardziej przypadł mi do gustu. Korzystam z niego bez przerwy od dłuższego czasu i szczerze mówiąc, pisząc tego posta musiałem się trochę naszukać bo już zapomniałem jak się on nazywa.

Dlaczego ten generator jest dobry?

  • Posiada wbudowany autoprefixer CSS,
  • uruchamia środowisko „live preview” i pozwala otwierać stronę na każdym urządzeniu w naszej sieci lokalnej,
  • automatycznie kompiluje pliki Sass,
  • automatycznie minifikuje pliki do produkcji,
  • posiada świetne narzędzie do optymalizacji obrazów,
  • automatycznie dołącza wszystkie zależności zainstalowane przy pomocy Bower-a.

Instalacja

Dość tych dywagacji natury technicznej. Skupmy się teraz na tym co interesuje mnie najbardziej czyli jak wykorzystać Yeoman-a w codziennej pracy. Jeżeli nigdy nie korzystałeś z tego typu narzędzi musisz ogarnąć kilka kwestii zanim rozpoczniesz pracę:

1. Stwórz sobie skrót do konsoli systemowej
Od dziś konsola będzie Twoim nowym przyjacielem. To z niej będziesz uruchamiał serwer lokalny i instalował dodatkowe wtyczki. Nie przejmuj – tak na prawdę wszystko sprowadzi się do zapamiętania 3-4 komend. Po pierwszym czy drugim projekcie będziesz je znał na pamięć.

2. Pobierz i zainstaluj środowisko node.js
Wszystkie niezbędne informacje oraz instalator znajdziesz tutaj: https://nodejs.org/en/download/.

3. Pobierz i zainstaluj Git-a
Paczki instalacyjne są dostępne pod adresem: https://git-scm.com/downloads.

4. Zainstaluj menadżera pakietów Bower.
Otwórz konsolę i wpisz komendę npm install -g bower.

5. Zainstaluj Gulp.js
W konsoli użyj komendy npm install --global gulp-cli

6. Zainstaluj generator Yeoman
npm install --global yo gulp-cli bower generator-webapp

Tworzenie projektu

Jeżeli przebrnąłeś przez wszystkie instalacje pomyślnie, Twoje środowisko powinno być już gotowe do pracy. W tym miejscu zaczynają się właściwe kroki, które będziesz wykonywał przy każdym projekcie. No to zaczynamy!

1. Tworzymy nowy folder
Aby zacząć pracę stwórz nowy folder a następnie przejdź do niego wpisując w konsoli
cd /ścieżka/do/folderu.

2. Generujemy strukturę plików
Czas by Yeoman wkroczył do akcji. Użyj komendy yo webapp i postępuj zgodnie z kreatorem. Yeoman zapyta Cię co konkretnie ma zainstalować. Ponieważ nie lubię Bootstrapa zwykle zaznaczam tylko Sass i Modernizr.

Po ukończeniu pracy generatora folder ma następującą strukturę:

  • /app  – główny folder z plikami projektu
  • /bower_components – wszystkie zależności działające po stronie klienta
  • /node_modules – komponenty potrzebne do działania serwera
  • bower.json – lista wymaganych zależności klienta
  • package.json – lista wymaganych zależności serwera
  • gulpfile.js – plik konfiguracyjny Gulp-a

3. Uruchamiamy stronę
Teraz wystarczy użyć polecenia gulp serve i po chwili nowa strona powinna otworzyć się w Twojej domyślnej przeglądarce.

Instalowanie zależności

Skoro serwer działa poprawnie i możesz już spokojnie pracować nad projektem, sprawdźmy w jaki sposób rozszerzyć go o dodatkowe funkcjonalności. Powiedzmy, że interesuje nas plugin Slick Carousel (najlepszy darmowy skrypt do pokazu slajdów). Na oficjalnej stronie w GitHubie znajdziemy gotową komendę do instalacji przy pomocy Bower. Możemy także wykorzystać polecenie bower serarch slick by wyszukać interesującą nas wersję pluginu.

Instalacja zależności wygląda następująco:

1. Ściągamy paczkę
bower install slick-carousel --save
Warto tutaj zwrócić uwagę na parametr –save. Wykorzystując go wymuszamy by został dopisany do wymaganej listy zależności. Mówiąc wprost: zostanie dopisany w pliku bower.json. Dzięki temu plugin nie zostanie pominięty gdy inna osoba przejmie projekt od Ciebie lub gdy będziesz generował pliki produkcyjne.

2. Linkujemy plugin
Bower ściągnął z repozytorium plugin Slick lecz nie jest on jeszcze załączony w HTML-u i CSS-ie. Aby to zrobić używamy polecenia gulp wiredep. Te polecenie wykona za nas wszystkie operacje linkowania. Sprawdzi zależności zawarte w bower.json i wstrzyknie je do naszego kodu.

3. Ponownie uruchamiamy stronę
gulp serve – uruchamia się podgląd w przeglądarce i oczekuje na zmiany w plikach.

Pliki produkcyjne

Gdy kończysz pracę nad projektem i chcesz go opublikować w internecie, przychodzi czas na wygenerowanie ostatecznych plików wynikowych. Środowisko załatwi to jednym poleceniem: gulp. Czyż to nie jest piękne? Wykonane zostaną wszystkie operacje łączenia, minifikowania CSS i JavaScript a także optymalizacji obrazów.

Pliki produkcyjne znajdziesz w nowo utworzonym folderze /dist.

Podsumowanie

Pokazane środowisko nie jest już nowością w świecie front-endu bo działa sprawinie od kilku lat. Niemniej jednak nie wszyscy zdążyli się przestawić na ten model. Na początku podchodziłem do niego sceptycznie, testowałem różne, niedopracowane jeszcze wtedy generatory by ostatecznie znaleźć dobrze działające rozwiązanie. Zachęcam was by zrobić to jak najszybciej.  Mimo, że z pozoru wydaje się to wszystko skomplikowane, w rzeczywistości niesamowicie poprawia szybkość i komfort pracy. Ale o tym musisz przekonać się na własnej skórze.

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.