Jak się uczę: Sass, Gulp i Webpack

Podstawą pracy front-end developera jest HTML, CSS i JavaScript. Nie znaczy to jednak, że po ich opanowaniu, kończy się nauka. Istnieje mnóstwo narzędzi ułatwiających pracę, bez których właściwie nie powstają projekty. Dzisiaj o trzech z nich, które powinien znać każdy, kto chce zgłębiać tajemnice web developmentu.

Oczywiście najlepiej znać je w praktyce, dlatego, jak to w serii Jak się uczę, polecam wartościowe materiały do nauki, z których sama korzystam. Na końcu wpisu czeka na Was mała niespodzienka, więc warto doczytać do końca 🙂 Wpis jest dość długi, ale starałam się w nim zebrać materiały, które dobrze wytłumaczą każde z opisywanych narzędzi. Dzięki temu możecie potraktować ten artykuł jako początek do nauki Sass, Gulpa i Webpacka.

Jak pewnie zauważyliście, w poprzednich wpisach z tej serii (znajdziecie wszystkie tutaj), zajmowałam się jednym zagadnieniem na raz. Dlaczego więc dzisiaj aż trzy? Po pierwsze, dlatego, że tematy są mniejsze niż np. Angular, o którym pisałam. A po drugie – chcę stworzyć zbiór tematów, które początkujący front-end developer powinien znać i chcę zbierać po kilka fajnych narzędzi w danym wątku, żeby łatwo było do nich trafić. Narzędzia te są ze sobą w pewien sposób powiązane. Ale o tym już w konkretach. Zaczynamy!

Sass

Czym jest Sass? To preprocesor CSS, który znacznie ułatwia stylowanie strony czy aplikacji. Dzięki wprowadzeniu zagnieżdżania, zmiennych, czy tzw. mixinów, pozwala uniknąć powtarzającego się kodu i sprawia, że praca ze stylami jest o wiele bardziej intuicyjna. Kto z nas nie chciał stworzyć sobie zmiennej z nazwą koloru, zamiast ciągle wpisywać jego kod? Sass właśnie nam to umożliwia. A to tylko jedna z wielu jego funkcjonalności. Odkąd poznałam Sass, już właściwie nie korzystam z czystego CSS.

Naukę Sass polecam zacząć od oficjalnej strony, którą znajdziecie tutaj. A szczególną uwagę warto zwrócić oczywiście na dokumentację, która nie jest przesadnie długa, a naprawdę świetnie tłumaczy funkcjonalności. Jeśli wolicie poznawać Sass w formie jakiegoś kursu, odsyłam Was w pierwszej kolejności do kursu na Codecademy. Pozwala on poznać podstawy i rozeznać się, o co właściwie chodzi z Sassem. Minusem kursu na Codecademy jest na pewno fakt, że nie tłumaczy on, jak sobie Sass zainstalować i korzystać z niego w swoich projektach. Niestety nie jest tak, że wystarczy wpisać kod i od razu działa. Sass jest preprocesorem i wymaga, aby pliki scss zostały zmienione w pliki css, do czego potrzebujemy konkretnych narzędzi (a o nich w dalszej części wpisu).

Kolejnym kursem, który polecę jest Assembling Sass na CodeSchool. Wstęp do kursu jest bezpłatny, dalsza część dostępna jest dla osób, które mają wykupiony dostęp do strony. Sam kurs nie jest bardzo odkrywczy, więc nie uważam, żeby tylko dla niego warto było wykupić dostęp na CodeSchool. Ale jeśli dostęp macie, na pewno warto kurs zrobić. Swoją drogą – CodeSchool jest kopalnią świetnych kursów z bardziej zaawansownaych zagadnień. Jeśli więc chcecie wskoczyc na wyższy poziom, myślę, że wykupienie dostępu to dobry pomysł. Wracając do Sass – warto też spojrzeć na ściągę, zawierającą wszystkie ważniejsze funckjonalności, którą znajdziecie tutaj.

Gulp

Następny w kolejce dzisiaj jest Gulp. Jest on bardzo ważnym narzędziem w pracy front-end developera, bo pozwala na automatyzację wielu zadań. Dzięki temu, że mamy możliwość konfiguracji, naprawdę można zaoszczędzić sobie wiele czasu. Gulp m.in. kompiluje pliki Sass (tzn. zamienia je w pliki CSS, żeby przeglądarka mogła je przeczytać), odświeża stronę przeglądarki (gdy zapisujemy zmiany w edytorze i dzięki temu od razu widzimy, jak zmienia się nasza strona), łączy pliki (w projekcie możemy mieć np. wiele plików scss, które Gulp zamieni dla nas w jeden plik css) czy dodaje prefiksy odpowiednie dla różnych przeglądarek (gdy musimy przy stylowaniu wskazać jak ma wyglądać dana funkcjonalność w różnych przeglądarkach). A to oczywiście nie wszystko. Brzmi super, prawda? Na początku to była dla mnie taka trochę magia. A potem odkryłam, że to wszystko JavaScript 😉

Pierwszą rzeczą, z jaką należy się zapoznać, gdy chcemy używać Gulpa, jest nodejs. To środowisko do uruchamiania JavaScriptu bez używania przeglądarki. Instrukcje, jak zainstalować nodejs znajdziecie oczywiście na jego oficjalnej stronie. Gdy już mamy nodejs, możemy używać npm, czyli Node Package Manager. To on będzie instalował odpowiednie paczki do naszego projektu, m.in. paczkę z Gulpem. O tym, jak zainstalować npm, dowiecie się tutaj. Npm używamy z poziomu konsoli, co znacznie ułatwia pracę nad projektem. Nie musimy wchodzić ręcznie w katalogi, aby zainstalować czy rozpakować paczki, wszystko wykonujemy za pomocą różnych poleceń wpisywanych w konsoli.

Po zainstalowaniu nodejs i npm, przez konsolę możemy zaintalować Gulpa. O tym, jak to zrobić mówi przeczytacie w w repozytorium Gulpa na githubie. Oczywiście instalacja to jedno, a używanie, to drugie. I sprawnego używania Gulpa trzeba się nauczyć. W pierwszej kolejności polecam artykuł Gulp for begginers ze strony CSS-tricks. Tłumaczy on nie tylko, jak zainstalować Gulpa, ale też jak skonfigurować swój pierwszy plik i jak później używać go w projekcie. Artykuł jest dość długi, ale dowiecie się z niego, jak sprawić, by Gulp zmieniał pliki scss w css czy automatycznie odświeżał przeglądarkę przy zapisie pliku w edytorze, więc naprawdę warto go dokładnie przeczytać. Oczywiście możecie też sięgnąć do oficjalnej strony Gulpa, ale w tym wypadku nie odsyłam do dokumentacji w pierwszej kolejności, bo fajniej tłumaczy wszystko wyżej wspomniany artykuł. Bardzo fajnie o Gulpie opowiada też seria filmików na youtube, tutaj na przykład znajdziecie film o podstawach Gulpa.

Webpack

I teraz czas na trzeciego bohateria dzisiejszego wpisu, czyli Webpack. To kolejne narzędzie, które ogromnie usprawnia pracę przy aplikacjach czy stronach zbudowanych za pomocą HTML, CSS i JS. Webpack to tzw. module bundler, który pozwala nam tworzyć kod podzielony na wiele modułów, które później Webpack łączy. Może brzmi to trochę enigmatycznie, ale szybko można załapać, o co chodzi. Webpack procesuje aplikację i tworzy tzw. graf (lub drzewo) zależności. To znaczy, buduje aplikację i układa kolejność wczytywania plików na podstawie określanych w nich zależności. Sprawdza, który plik musi być zaimportowany do innego, itd. Ważne jest określenie tzw. entry point, dzięki czemu Webpack wie, który plik jest głównym i gdzie powinny zacząć się zależności. Jeśli interesują Was bardziej obrazowe przykłady tłumaczące działanie Webpacka, odsyłam do artykułu Webpack Tutorial: Understanding How it Works oraz do sekcji Concepts na oficjalnej stronie Webpacka.

Oprócz wspomnianej wyżej oficjalnej strony Webpacka, bardzo polecam polski kurs z Eduweb Kurs Webpack. Wydajna praca z JavaScript. Przyznam, że rzadko korzystam z polskich źródeł, jeśli chodzi o kursy czy materiały. Po pierwsze dlatego, że jest ich dość mało, a po drugie – łatwiej uczy mi się po angielsku. Jednak kurs z Eduweb bardzo pozytywnie mnie zaskoczył. Kurs jest bardzo dobrze rozplanowany i świetnie poprowadzony. Poznajemy Webpack od podstaw, od samej instalacji, przez użycie w projekcie, aż po bardziej zaawansowane funkcje. Na początku trochę raziło mnie spolszczalnie niektórych angielskich nazw przez prowadzącego, ale myślę, że to kwestia przyzwyczajenia. W trakcie kursu wytłumaczone jest na przykład, jak sprawić, by Webpack kompilował nasze pliki scss do css, transpilował ES6 do ES5, jak Webpack może współpracować z Gulpem czy jak asynchronicznie ładować moduły.

Na pewno dużym plusem kursu jest fakt, że można traktować go jako materiał całościowy, tj. taki, który poprowadzi nas przez cały proces zapoznawania się z narzędziem. Najpierw bowiem tłumaczy on, czym w ogóle jest Webpack, potem krok po kroku prowadzi nas przez instalację i potem zajmuje się po kolei coraz bardziej zaawansowanymi aspektami. Fajne jest też to, że przy okazji uczymy się przydatnych poleceń npm (bo musicie wiedzieć, że tutaj też działamy z poziomu konsoli wpisując różne polecenia). Przyznam, że to chyba pierwszy kurs, na jakim trafiłam, w którym tak dokładnie tłumaczono, jak zacząć pracę z danym narzędziem. Często kursy skupiają się na samych funkcjonalnościach, a nie mówią, jak właściwie zaimplementować dane narzędzie w naszym projekcie. A tutaj właśnie uczymy się tego od razu, co jest naprawdę bardzo przydatne. Bardzo podobało mi się też to, że można ściągnąć sobie źródła, które używane są w trakcie kursu i zobaczyć, jak faktycznie wyglądają te wszystkie pliki.

Kurs Webpack na Eduweb jest płatny, kosztuje 79zł. Dzięki uprzejmości Eduweb dostałam dla Was kod rabatowy, który jest ważny od dzisiaj (tj. od 1 lipca) do 8 lipca. Przy zakupie kursu należy wpisać kod WAKEUP w pole Chcę zrealizować Kartę Podarunkową na stronie zakupu kursu, aby kupić kurs po niższej cenie.

Dzisiejszy wpis prezentuje narzędzia, które sprawiają, że praca z kodem staje się łatwiejsza i przyjemniejsza. Na pewno warto poświęcić czas, by zapoznać się z tymi narzędziami, bo korzysta się z nich na co dzień przy pracy jako front-end developer. I chociaż często mamy już skonfigurowane odpowiednie pliki dla Gulpa czy Webpacka i nie musimy tworzyć ich od zera, naprawdę warto wiedzieć, jak to wszystko działa i jak w razie czego możemy w łatwy sposób coś zmienić czy uaktualnić. Polecam zainstalowanie sobie każdego z tych narzedzi i wypróbowanie ich na małych projektach, żeby zobaczyć jak działają.

Masz pytania? Napisz w komentarzu!

Chcesz być na bieżąco? Polub fanpage Wake up and Code i dołącz do grupy Programuj, dziewczyno!