Przejdź do:
Webpack vs Gulp… Oba te narzędzia odgrywają ważną rolę w świecie programistycznym. Wybór między nimi często na pierwszy rzut oka wydaje się trudny. Zwłaszcza na początku przygody z programowaniem. Jednak jeśli poznamy ich różnice i podobieństwa, z pewnością będzie łatwiej podjąć właściwą decyzję.
Bez względu na to, czy rozważasz użycie Gulpa (task runner), Webpacka (module bundler), czy może kombinacji obu, znajomość ich funkcjonalności z pewnością ułatwi ci pracę i zwiększy produktywność. Jeśli zatem szukasz odpowiednich narzędzi do swojego projektu, koniecznie przeczytaj ten artykuł.
SCSS vs CSS – podstawy
Zanim porównam narzędzia Webpack i Gulp, przypomnijmy sobie, czym są technologie CSS i SCSS. Są one niezbędne w programowaniu na front-endzie.
CSS i SCSS to technologie, których na co dzień używamy do przypisywania konkretnych wyglądów do elementów (kolor, rozmiar) i rozmieszczania tych elementów na stronie. Ważne jest jednak, aby przed podjęciem decyzji o skorzystaniu z wybranej z nich wziąć pod uwagę pewne różnice.
CSS to standardowy język arkuszy stylów, mający ugruntowaną pozycję w świecie front-endowym. W porównaniu z SCSS jego składnia wydaje się prostsza i o wiele bardziej intuicyjna. Młodsi programiści zdecydowanie stawiają na CSS, szczególnie na wczesnym etapie nauki. Reguły CSS mają na celu zdefiniowanie stylów dla określonych elementów, takich jak paragrafy, divy czy inne elementy HTML.
/* Składnia CSS */
h1 { color: blue; font-size: 24px; }
SCSS jest niczym innym jak preprocesorem CSS, to znaczy rozszerza składnię o dodatkowe funkcje i pozwala na wykorzystanie zaawansowanych technik, w tym takich jak:
- reguły zagnieżdżania – selektory CSS można zagnieżdżać w innych, odzwierciedlając strukturę selektorów HTML.
- użycie zmiennych (które umożliwiają przechowywanie wartości wielokrotnego użytku w arkuszu stylów),
- operatory matematyczne (pozwalające na dodawanie, odejmowanie, mnożenie i dzielenie wartości w stylach), dzięki czemu jest łatwiej pisać kod i staje się on bardziej modułowy i po prostu elegancki.
/* Składnia SCSS z zagnieżdżaniem i zmiennymi */
$primary-color: blue;
h1 {
kolor: $primary-color;
font-size: 24px;
}
Kluczowe różnice między SCSS i CSS:
- Składnia: SCSS oferuje bardziej rozszerzoną składnię, co ułatwia pisanie i utrzymanie kodu. Reguły zagnieżdżania pozwalają pisać bardziej czytelny i logiczny kod.
- Zmienne: SCSS umożliwia definiowanie zmiennych, ułatwiając zmienianie wartości stylu w jednym miejscu i tym samym przyczyniając się do spójności w całym projekcie.
- Preprocesor: SCSS jest jednym z wielu preprocesorów CSS (to znaczy, że kod SCSS musi zostać skompilowany do zwykłego CSS przed wdrożeniem na stronie internetowej).
Wybór między SCSS i CSS zależy od tego, na ile złożony jest projekt i jakie są umiejętności zespołu projektowego. W przypadku niezłożonych projektów, które nie wymagają zaawansowanych technik ostylowania, CSS może okazać się odpowiednim wyborem. Jednak w przypadku bardziej złożonych projektów, które wymagają modułowości i łatwego edytowania, SCSS pozwoli na większą elastyczność i wygodę w zarządzaniu stylami.
Przeczytaj także:
Instalacja Webpacka
Funkcje Webpacka pozwalają przede wszystkim na zarządzanie zależnościami i porządkowanie plików. Instalacja narzędzia to naprawdę “bułka z masłem”. Zaczynamy od sprawdzenia, czy jest już zainstalowany Node Package Manager (NPM), który moim zdaniem umożliwia najskuteczniejszą i najszybszą instalację Webpacka. Następnie otwieramy wiersz poleceń i wpisujemy:
npm install webpack –g
Z wiersza poleceń przechodzimy do katalogu z naszym projektem i wpisujemy polecenie:
npm init
Możemy tu zauważyć, że w katalogu docelowym został utworzony plik package.json. Nie pozostaje nic innego, jak tylko zainstalować Webpacka w naszym projekcie:
npm install --save-dev webpack
A teraz już możemy cieszyć się ogromnymi możliwościami narzędzia!
W dalszych krokach konfiguracja zależy od potrzeb konkretnego projektu – w punktach poniżej opiszę przykładową, krótką konfigurację. Szczegółowe wytyczne dotyczące możliwości Webpacka można znaleźć w oficjalnej dokumentacji na stronie: Webpack Documentation.
Instalowanie Gulpa
Gulp stosuje się do automatyzacji niektórych zadań, takich jak kompilacja, minifikacja plików, obrazów lub odświeżanie przeglądarki. Instalacja Gulpa jest tak samo łatwa jak w przypadku Webpacka. Upewniamy się, że mamy zainstalowany NPM. I zaczynamy od polecenia:
npm install -g gulp
Przechodzimy do naszego katalogu projektów, potem tworzymy plik package.json za pomocą polecenia:
npm init
Wystarczy teraz dodać Gulpa do naszego projektu:
npm install ---save-dev gulp
Jak skonfigurować Webpacka? Po instalacji możemy przystąpić do tworzenia pliku gulpfile.js. Będzie on odpowiadał za konfigurację zadań dla naszego narzędzia. W dalszej części przedstawię również krótką konfigurację dla Gulpa.
Aby poznać wszystkie możliwości Gulpa, skorzystaj z dostępnej dokumentacji.
Konfiguracja Webpacka
Jak wspomniałem wcześniej, przedstawię krótką konfigurację Webpacka. Narzędzie jest na tyle zaawansowane, że nie da rady opisać tu wszystkich jego możliwości.
Zacznijmy od dodania pliku webpack.config.js, który zawiera całą konfigurację Webpacka.
Następnie umieśćmy tam podstawową konfigurację:
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
mode: 'production'
};
Zdefiniowaliśmy, skąd Webpack ma pobierać pliki źródłowe (entry). Output określa, gdzie powinny być umieszczone po przetworzeniu. Opcja mode określa, czy chcemy zoptymalizować kod, na przykład pod kątem produkcji. Webpack zapewnia szeroki pakiet wtyczek i loaderów, co pozwala dostosować go do naszych potrzeb.
Konfiguracja Gulpa
Gulp to narzędzie do automatyzacji zadań, które możemy odpowiednio dostosować w pliku gulpfile.js. W czasie konfiguracji definiujemy takie zadania, jak: minifikacja kodu, kompilacja czy odświeżanie przeglądarki po każdej zmianie w kodzie.
const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('compress', function() {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
To przykładowa konfiguracja mająca za zadanie skompresowanie plików JavaScript.
Zaczynamy od stworzenia nowego zadania o nazwie „Compress”. Następnie, za pomocą returngulp.src (’src/js/*.js’), określamy pliki źródłowe do przetworzenia (w naszym przypadku będą to wszystkie pliki z rozszerzeniem .js, z katalogu src/js).
Kolejny krok to przekazanie plików źródłowych do wtyczki za pomocą pipe(uglify()), który kompresuje kod, usuwając np. zbędne spacje, komentarze, tak aby plik był możliwie jak najmniejszy.
Na koniec wskazujemy katalog do zapisywania przetworzonych plików.
Obsługa narzędzi Gulp vs Webpack – porównanie
Jeśli miałbym porównać Webpack i Gulp, trudno wskazać jeden słuszny wybór – wszystko zależy od projektu, w którym pracujemy.
Webpack to w głównej mierze pakiet do kompilacji zasobów projektu, tak aby zyskać przejrzystość. Dzięki wtyczkom można łatwo go rozszerzyć i zyskać wachlarz zastosowań, takich jak:
- Transpilacja – w przypadku JavaScript np. dostosowanie wersji ES6 do starszych przeglądarek
- Minifikacja kodu (usuwanie niepotrzebnych znaków z kodu, aby zmniejszyć rozmiar, a tym samym poprawić czas ładowania)
- Zarządzanie zależnościami
Sprawdź, jakie wtyczki są dostępne dla Gulpa: Korzystanie z wtyczki
Gulp to jednak także narzędzie do automatyzacji zadań, które bardzo usprawnia przepływ pracy. Moim zdaniem bardzo łatwo nauczyć się korzystać z tego narzędzia. Całkiem szybko możemy zacząć tworzyć zadania dla kompilacji plików SASS lub automatycznego odświeżania przeglądarki. Konfiguracja jest o wiele bardziej czytelna i elastyczna.
Webpack doskonale radzi sobie z zależnościami, natomiast Gulp wyróżnia się na tle innych narzędzi, jeśli chodzi o pełną automatyzację pracy (jeśli na tym ci właśnie zależy).
W skrócie:
- Webpack pozwala na łączenie modułów. Ale też, tak jak Gulp, umożliwia uruchamianie wielu funkcji dotyczących zadań
- Gulp to narzędzie do automatyzowania zadań, które usprawnia przepływ pracy
Które narzędzie wybrać: Gulp czy Webpack?
Wybór pomiędzy nimi zależy od konkretnych potrzeb i architektury naszego projektu. To też kwestia prywatnych preferencji i doświadczenia. Jeśli łączenie i zarządzanie zależnościami są złożone i będą istotne w procesie rozwoju oprogramowania, Webpack może okazać się właściwym rozwiązaniem. Z drugiej strony, jeśli potrzebujmy prostego i czytelnego sposobu na automatyzację typowych zadań programistycznych, Gulp będzie do tego doskonały.
Pamiętaj, że nic nie stoi na przeszkodzie, aby oba narzędzia połączyć. Korzystanie z Gulpa i Webpacka jednocześnie oznacza dostęp do zalet każdego z nich. Wpłynie to pozytywnie nie tylko jakość projektu, ale też pozwoli skrócić czas potrzebny na rozwój oprogramowania.
Użycie Webpacka zamiast Gulpa
W połączeniu ze skryptami NPM Webpack może z powodzeniem zastąpić Gulpa. Z mojego doświadczenia wynika jednak, że lepiej łączyć narzędzia, niż ograniczać się tylko do jednego, do czego was zachęcam. Jak już wspomniałem, Webpack i Gulp to narzędzia do budowania (build tools), które można wykorzystywać do podobnych zadań. Cechują się jednak różnymi podejściami i każde z nich ma inne mocne strony.
Koniec końców wybór między korzystaniem z samego Webpacka lub połączeniem go z Gulpem będzie zależeć od twojego projektu i twoich własnych preferencji programistycznych.
Gulp vs Webpack – podsumowanie
Mam nadzieję, że udało mi się przemycić w artykule korzyści płynące z używania Webpacka i Gulpa. Co do pytania „Webpack czy Gulp?”, tu nie ma idealnej odpowiedzi, zwłaszcza jeśli jesteś początkującym front-end developerem. Ten artykuł to tak naprawdę wprowadzenie do tych narzędzi – na każdym etapie warto wspierać się dokumentacją, wiedzą doświadczonych kolegów z projektu, a także Technical Leaderów.
Dokonując wyboru, najlepiej skupić się na swoich umiejętnościach, doświadczeniu i potrzebach projektowych. Nie ma uniwersalnego rozwiązania. Często ekosystem jest narzucany odgórnie. Warto więc eksperymentować z obiema technologiami, łączyć je, testować i tworzyć zoptymalizowane, wydajne środowisko.
Maciej od zawsze interesował się nowinkami technicznymi. Frontendem zajmuje się od 2015 roku. Entuzjasta całego ekosystemu JavaScript, głównie Angulara. Na co dzień rozwija duże systemy programistyczne.