Gulp 4 – konfiguracja na start do pracy na Front-Endzie.

Szukasz narzędzia aby szybko zacząć pracę ze swoim projektem na Front-Endzie? W tym artykule znajdziesz prostą konfigurację dla Gulpa 4.

Czego się dzisiaj dowiesz?

Pokażę przykładową konfigurację Gulp’a którą ostatnio stworzyłem i podam link do repozytorium. Wszystko w standarcie Gulpa 4 aktualnego w 2019 roku.

Jak zwykle będzie trochę podstawowej teorii i ogólnych komentarzy do tego wszystkiego 🙂 Jeśli chcesz przejść bezpośrednio do kodu kliknij TUTAJ.

Dlaczego o tym piszę?

Bo dostałem od Was kilka komentarzy – weź znowu zrób taką konfigurację tylko aktualną! Czego znowu? Bo dawno temu napisałem już wpis o Gulp’ie i nomen omen jest to jeden z moich najpopularniejszych wpisów! Google lubi mojego bloga 🙂

Z drugiej strony jak ktoś w 2019 używa starej konfiguracji bo znalazł ją na tym blogu to trochę słabo…

Gulp

Jest to narzędzie do automatyzacji pracy na Front-Endzie tzw. task runner. Najzwyczajniej w świecie wykonuje on w tle powtarzalne, nudne zadania i optymalizuje nasz kod. W starym wpisie o Gulpie starałem się to wyjaśnić trochę dokładniej (hehe nie wiem czy tamta próba się do końca udała 🙂 )

Do czego używać Gulpa?

Oczywiście możesz znaleźć wiele innych zastosowań ale moim zdaniem Gulp jest dobry do stosunkowo prostych projektów na bazie HTML + CSS + JS. Nie ma tam skomplikowanych zależności, nie importujesz specjalnie zewnętrznych bibliotek/modułów. Końcowy skompilowany kod jest lekki i szybki (przynajmniej z założenia).

Jeżeli planujesz coś bardziej ambitnego i potrzebujesz wielu dodatkowych zależności to użyj Webpacka. Dla bardziej zaawansowanych projektów użyj np. Angulara, Reacta lub Vue.

Czego nie będzie w tej konfiguracji?

Jako punkt odniesienia przyjmę konfigurację ze starego wpisu gdzie użyłem minifikacji grafiki. Uważam ją za zbędną bo są do tego lepsze narzędzia. Przeczytaj mój artykuł o grafikach to dowiesz się więcej 🙂

Instalacja Gulpa

Na początku trzeba go zainstalować i utworzyć projekt w którym znajdzie się plik gulpfile.js. To jest akurat dość proste i znakomicie opisane w dokumentacji 🙂 Jeśli nie wiesz jak może wyglądać taki projekt to sprawdź moje repozytorium na Githubie.

Gulpfile.js

Teraz będę konfigurował ten plik. Nie będę opisywał kolejno każdego etapu. Postaram się bardziej ująć sedno sprawy abyś lepiej zrozumiał/a główne zasady kierujące całym procesem konfiguracji.

Konfiguracja 

Gulp importuje/eksportuje wiele plików w Twoim projekcie. Poszczególne zadania potrzebują podawania ścieżek do tych plików. Możesz zebrać to w jednym obiekcie:

W ten sposób wszystko jest bardziej czytelne.

Definicja Tasków

W nowej wersji Gulp’a można dodawać taski za pomocą zwykłej deklaracji funkcji. Uważam to za bardzo fajne bo w ten sposób czujesz się jakbyś pisał zwykłego JS’a a nie jakieś gulpy. Może to wyglądać np. Tak:

Co warto mieć na uwadze?

Dobrze używać callbacku np. done() który informuje Gulpa o zakończeniu danego zadania.

Na początku taska podaje się link do plików źródłowych za pomocą src. Jako argument podaje się element z naszego obiektu konfiguracyjnego.

Jest też taka konstrukcja jak pipe. Taki task może składać się z kilku etapów które muszą wykonać się z ściśle określonej kolejności. Te pipe’y to właśnie takie rurociągi którymi kolejno przepływają kolejne procesy 🙂

Naprawdę mi się podoba ta składnia w Gulpie 4!

Sekwencja Tasków

Mamy to nową składnię do sekwencyjnego wykonywania tasków:

W ten sposób zdefiniowałem komendę gulp build. Widzisz tu dwa sposoby na dodawanie tasków to takiej sekwencji – series i parallel.

Jeśli używasz series to taski będą wykonywały się jeden po drugim. Przy parallel wykonują się niezależnie/ równolegle.

Cały plik konfiguracyjny

W zasadzie to wszystko co chciałem omówić w nowym Gulpie. Teraz czas na pełny plik konfiguracyjny:

Koncepcja tej konfiguracji jest taka, że piszesz cały kod w folderze src. Ten kod jest na bieżąco przetwarzany przez Gulpa i przenoszony do folderu dist. Wszystko co zobaczysz w swojej przeglądarce będzie pochodziło z folderu dist.

Repozytorium na Githubie

Aby ułatwić Ci pracę stworzyłem to repozytorium. Po prostu sklonuj je sobie, zainstaluj wszystkie zależności i komenda gulp dev odpali co trzeba 🙂

Praca z JavaScriptem

Choć ta konfiguracja korzysta z Babela i kod się dość ładnie kompiluje do starszych wersji JS’a to np. nie działa konstrukcja @import. Nie wiem, czy jest jakaś dodatkowa konfiguracja o której nie wiem ale przez to nie możesz stworzyć bardziej skomplikowanej struktury JS’a.

Robiąc research natrafiłem na konfigurację tego gościa. Najprawdopodobniej aby obejść ten problem wplótł on do Gulpa Webpacka 🙂 Niby działa ale to trochę dla mnie bez sensu… Skoro dodajesz Webpacka do konfiguracji Gulpa to po co w ogóle używasz Gulpa?

Użyj od początku Webpacka i oszczędź sobie tej gimnastyki 😀

Podsumowanie

Dzisiaj zobaczyłeś/aś przykładową konfigurację prostego projektu w Gulpie 4. Masz szablon który możesz dowolnie modyfikować i wykorzystywać przy swoich kolejnych pracach.

Ten wpis jest dość ogólny ale traktuje go jako uzupełnienie moich poprzednich artykułów o Gulpie i Webpacku 🙂