Narzędzia do budowania stały się wybawieniem programistów. Pozwalają nam automatyzować zadania nudne i powtarzalne czy wykonywać skomplikowane procesy. Jednak pojawił się problem, jak to w IT, która biblioteka jest lepsza. Dzisiaj odpowiem na pytanie „co wybrać”  dotyczące dwóch najpopularniejszych narzędzi do budowania — Gulp vs Webpack? A może Gulp i Webpack?

Powyższe pytanie nie jest takie bezpodstawne, na jakie może wyglądać. Mimo że te dwa narzędzia są od siebie różne, bardzo często wykorzystuje się je do tego samego zadania. Sprawia to, że ludzie odnoszą mylne wrażenie, że są to narzędzia konkurencyjne. To jednak nie jest prawda. Już śpieszę z wyjaśnieniem.

Gulp

Gulp jest task runnerem. Oznacza to, że pozwala na uruchamianie raz napisanych zadań. Zadania mogą być naprawdę różne. Najpopularniejsze to zadania związane z frontendem i budowaniem aplikacji:

  • Zamiana SASS/SCSS do CSS
  • Zamiana ES6 do JS
  • Minifikacja plików
  • Łączenie wielu plików w jeden
  • Czyszczenie plików w console.log() i komentarzy
  • Uruchamianie testów
  • Optymalizacja zdjęć
  • Lintowanie kodu


I tak dalej.

Jednak na tym się nie kończą możliwości Gulpa. W zasadzie to wykraczają one poza sam projekt. Możemy przykładowo zautomatyzować wrzucanie kodu na jakiś serwer FTP, używanie SSH czy dodawanie zdjęć na Amazon S3. Możemy zzipować rzeczy, cachować coś w pamięci do szybszego budowania, stworzyć serwer developerski, który automatycznie przebudowywuje nam aplikację czy, co w sumie jest dosyć ważne, uruchomić Gulpem inne narzędzia, na przykład Webpacka. Ogólnie rzecz biorąc — większość rzeczy, które możecie wykonać na komputerze, może wykonać za was Gulp.

Webpack

Webpack z kolei jest bundlerem, czyli inaczej — bierze nasz kod, bardzo często podzielony na wiele plików, i tworzy kilka plików wynikowych. Podczas tej zamiany może wiele rzeczy zrobić kodem, między innymi:

  • Zamieni kod TypeScript na JavaScript.
  • Podmieni konkretne ciągi znaków na inny (np. <KEY> na konkretny klucz)
  • Weźmie wszystkie pliki JS, SCSS itp. i stworzy z nich pojedyncze pliki z całą zawartością poprzednich plików.
  • Zoptymalizuje zdjęcia użyte w aplikacji.

I wiele, wiele więcej.

Jest to doskonałe narzędzie do tworzenia serwera developerskiego i wersji produkcyjnej kodu. Pozwala sporo rzeczy zautomatyzować czy zoptymalizować, tak więc, jak najbardziej poleca się jego używanie.

Gulp vs Wepback

Okazuje się, że i Gulp i Webpack są bardzo użyteczne. Głównie przy tworzeniu serwera developerskiego. Dlatego bardzo często można spotkać artykuły czy całe debaty na temat tego, które narzędzie jest lepsze.

Odpowiedź jest prosta — nie można tego stwierdzić. To są 2 różne narzędzia. Co prawda pozwalają osiągnąć ten sam efekt, jakim jest najczęściej serwer developerski, auto odświeżanie strony po zmianach czy zbudowanie, optymalizacja i przygotowanie strony do wrzucenia na produkcję.

Nie zmienia to faktu, że to tylko część ich możliwości. Narzędzia te pozwalają też uzyskać całkiem inne efekty, niepodobne od siebie. Dlatego w mojej opinii porównywanie tych dwóch frameworków to jak porównanie statku i samochodu. Jedno i drugie pozwala się dostać z punktu (portu) A do punktu (portu) B, ale jednak pozwalają też osiągnąć cele, których drugi środek transportu nie osiągnie.

Gulp i Wepback

W takim razie można użyć albo jednego, albo drugiego narzędzia. Albo skorzystac z obu naraz. Jest to jak najbardziej możliwe i czasami istnieją projekty, gdzie jest to potrzebne. Na przykład Gulp uruchamia Webpacka, który buduje aplikację, tworzy paczki produkcyjne, po czym Gulp bierze pliki, łączy się do servera FTP i wrzuca tam produkcyjny kod. Lub Gulp uruchamia inny program w systemie, który np. obrabia pliki muzyczne a Webpack buduje później aplikację z użyciem już obrobionych plików.

Podsumowanie

Gulp i Webpack — nie jest to często wykorzystywana kombinacja narzędzi, ale jak najbardziej użyteczna. W większości przypadków jednak czeka cię wybór jednego narzędzia. Moja rada jest taka — po prostu wybierz to narzędzie, w którym się lepiej czujesz czy które lepiej znasz.

Jeżeli podobał ci się artykuł lub masz odmienne zdanie, zostaw komentarz. Chętnie z Tobą porozmawiam.



ZOSTAW ODPOWIEDŹ

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.