- Styczeń 2021
- Marzec 2020
- Luty 2020
- Styczeń 2020
- Wrzesień 2019
- Sierpień 2019
- Lipiec 2019
- Czerwiec 2019
- Maj 2019
- Kwiecień 2019
- Marzec 2019
- Luty 2019
- Styczeń 2019
- Grudzień 2018
- Listopad 2018
- Październik 2018
- Wrzesień 2018
- Sierpień 2018
- Lipiec 2018
- Czerwiec 2018
- Maj 2018
- Kwiecień 2018
- Marzec 2018
- Luty 2018
- Styczeń 2018
- Listopad 2017
- Październik 2017
- Wrzesień 2017
- Sierpień 2017
- Lipiec 2017
- Czerwiec 2017
- Maj 2017
- Kwiecień 2017
- Marzec 2017
- Luty 2017
Gulp 4 – konfiguracja na start do pracy na Front-Endzie.
gulp javascript
25/6/2019
Bartek Cis
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 🙂
Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?