Webpack vs Gulp vs Grunt

By Stephen Afam-Osemene

Wprowadzenie

Wraz z rosnącą złożonością projektów Javascriptowych i potrzebą automatyzacji zadań, śledzenia wydajności aplikacji i wykonywania niektórych czynności konserwacyjnych, bardzo istotna stała się decyzja, jaki typ narzędzia do budowania przyjąć.Zanim narzędzia do budowania stały się koniecznością, nie było jasne, jak radzić sobie z rutynowymi zadaniami. Nie było to bardzo konieczne, ponieważ Javascript nie musiał być szczególnie skompilowany; jednak z projektów, takich jak aplikacje jednostronicowe, i pojawienie się narzędzi do budowania, zadania, które powtarzają się są teraz zautomatyzowane.Widząc, że stało się więcej niż koniecznością korzystania z narzędzi do budowania, twórcy oprogramowania w tym czasie stoją przed wyzwaniem wybrania jednego, który jest idealny dla ich projektu.

W tym artykule, będziemy porównywać Grunt, Gulp i Webpack w odniesieniu do następujących cech:

• Łatwość użycia
• Popularność
• Reliability
• Extensibility

Grunt i Gulp są task runnerami, podczas gdy Webpack jest bundlerem modułów. Programy uruchamiające zadania są zasadniczo używane do automatyzacji zadań w procesie rozwoju. Niektóre z tych zadań obejmują kompresję plików JS, kompilację plików Sass, pilnowanie zmian w plikach, minifikację plików i autoprefiksację.Module bundlers biorą kilka modułów aplikacji, z których każdy ma zależności i łączą je w statyczne zasoby. Wiązarki modułów wykonują zadanie task runnerów, i robią kilka kroków dalej.Mam nadzieję, że pod koniec artykułu, będzie jaśniejsze, jakiego narzędzia do budowania użyć do swojego projektu.

Łatwość użycia

Im bardziej złożone jest narzędzie, tym trudniej jest go używać. Będąc task runnerami, Gulp i Grunt oferują funkcje takie jak minifikacja kodu, preprocessing CSS, testowanie jednostkowe i wiele innych.

W porównaniu z Gruntem lub Webpackiem, Gulp jest dużo łatwiejszy w użyciu. Możliwe jest uruchomienie projektu przy użyciu Gulpa w ciągu kilku minut. Grunt ma jednak mniej kłopotów z konfiguracją niż Webpack.

Aby skonfigurować Gulp, należy wykonać następujące kroki

• Sprawdzić, czy node, npm i npx są zainstalowane
• Zainstalować Gulp CLI używając npm install --global gulp-cli
• Utworzyć plik package.json dla devDependencies
• Zainstaluj pakiet gulp do devDependencies używając npm install --save-dev gulp@next
• Utwórz plik gulp.js, w którym będą zapisywane zadaniafunction defaultTask(cb) { //umieść tutaj kod dla swojego domyślnego zadania cb();}exports.default = defaultTask

Aby korzystać z Grunta, musisz wykonać następujące czynności:

• Uaktualnij swoje npm używając npm update -g npm
• Zainstaluj Grunt CLI używając npm install -g grunt-cli
• Skonfiguruj swój pakiet.json, gdzie twoje devDependencies są wymienione
• Utwórz plik Gruntfile.js, w którym zapisywane są zadania. Zadania są zawsze pisane wewnątrz tego bloku:module.exports = function(grunt) { // Zadania Grunt idą tutaj};

Procesy ustawiania Gulp i Grunt wyglądają podobnie. Jednak Gulp jest bardziej ekspresyjny; pozwala na pisanie kodu, który jasno określa swoją funkcję. Gulp jest oparty na strumieniach Node, pozwalając na pipelining. Grunt, z drugiej strony, opiera się na plikach konfigurujących dane, gdzie każdy plik źródłowy i docelowy musi być zadeklarowany. Gdy projekt staje się większy, Grunt staje się jeszcze bardziej kłopotliwy w zarządzaniu.

Jeśli, na przykład, musisz skompilować Sass, zminifikować wynikowy plik CSS i uglifować swój plik JS za pomocą Grunta, plik Gruntfile.js będzie wyglądał tak

module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': } } }, grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', );};

Z drugiej strony, jeśli ten sam proces ma być wykonany za pomocą Gulpa, plik gulp.js będzie wyglądał tak:

var gulp = require('gulp');var sass = require('gulp-sass');var cleanCSS = require('gulp-clean-css');var uglify = require('gulp-uglify');gulp.task('sass', function () { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('css', , function () { return gulp.src() .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('default', );

Gulp i Grunt są łatwiejsze do skonfigurowania w porównaniu do Webpacka.

Aby użyć Webpacka, musisz wykonać następujące czynności:

• Zainstaluj Nodejs i Npm
• W swoim terminalu, utwórz folder Webpack za pomocą mkdir folder-name
• Zainicjuj projekt Nodejs za pomocą npm init -y
• Utwórz następujące pliki touch index.html webpack.config.js index.js
• Zainstaluj Webpack i Webpack dev server używając npm i --save-dev webpack@latest webpack-dev-server@latest
• Zainstaluj Webpack globalnie npm i -g webpack@latest

• Zapisz konfigurację Webpacka w pliku webpack.config.js.

  const webpack = require(’webpack’);

  let config = { entry: ’./index.js’, output: { filename: 'output.js’ }}module.exports = config;

Powyższa konfiguracja to podstawowy start dla Webpacka. Webpack posiada różne przydatne funkcje i może zrobić o wiele więcej. Mnogość możliwości oferowanych przez Webpack może usprawiedliwiać jego złożoność. Potrzeba więcej czasu, aby zrozumieć, jak działa Webpack; może to również stać się uciążliwe podczas zarządzania kilkoma konfiguracjami dla wielu środowisk.

Popularność

Metryki do pomiaru popularności każdego z tych narzędzi różnią się. Grunt istniał na długo przed Gulpem, a wielu programistów używało go intensywnie. Jednak według badania State of JavaScript 2018, Webpack plasuje się wyżej niż Gulp i Grunt.

Rośnie zainteresowanie nauką korzystania z Webpacka; jest to uzasadnione, widząc szeroki zakres możliwości udostępnianych dzięki jego użyciu.

Przy użyciu statystyk Githuba, Webpack, Gulp i Grunt mają odpowiednio ponad 41 000, 30 000 i 11 000 gwiazdek.

Reliability

Gulp, Grunt i Webpack mają dużą zależność od wtyczek. Wszystkie trzy narzędzia mają duże społeczności, w których można rozwiązywać i naprawiać problemy. W przypadku Gulp i Grunt, istnieje duża zależność od autora wtyczki, aby utrzymać wtyczki, a czasami jest mało lub nie ma dokumentacji, na której można się oprzeć, gdy pojawia się problem. Rezultatem jest zazwyczaj oczekiwanie na aktualizacje lub samodzielne rozwiązywanie problemów. Jednakże, większość wtyczek Webpack jest utrzymywana przez zespół rdzenia Webpack, podczas gdy reszta jest zarządzana przez społeczność Webpack; i to czyni go bardziej niezawodnym.

Extensibility

Gulp, Grunt i Webpack zostały ulepszone w ciągu ostatnich lat. Wszystkie one mają więcej miejsca na nowsze i jeszcze bardziej wydajne i ustandaryzowane wtyczki.

Niektórzy użytkownicy Grunt zaczynają adoptować Gulp, ponieważ pozwala on na piping, a to wyjaśnia, dlaczego Grunt podobno wkrótce będzie miał aktualizację, która również pozwala na piping. Piping pozwala użytkownikom gulp na dołączenie wyjścia zadania do innej zależności, dzięki czemu kod jest krótszy i działa szybciej.

Obecnie Gulp wydaje się bardziej rozszerzalny niż Grunt, ponieważ gdy projekt się skaluje, nie jest tak trudno zarządzać plikiem gulp. Gulp używa wtyczek, z których każda wykonuje pojedyncze zadanie, w przeciwieństwie do Grunta, gdzie jedna wtyczka może wykonywać wiele zadań.

Webpack może być rozszerzony nawet poza swoją podstawową funkcjonalność za pomocą wtyczek i loaderów, jedynym problemem są komplikacje, które mogą pojawić się podczas jego konfiguracji. Jednakże, ponieważ Webpack łączy wszystkie moduły, które mają zależności, nie jest tak żmudna praca nad nawet dużymi projektami Webpack.

W czasie pisania, Grunt ma 6,459 wtyczek w swoim rejestrze wtyczek, podczas gdy Gulp ma 3,672 wtyczki wymienione w swoim własnym rejestrze wtyczek. Z tak wieloma wtyczkami dla obu, prawdopodobnie znajdziesz wtyczkę, która zrobi wszystko, czego potrzebujesz.Webpack ma swój własny zestaw oficjalnych wtyczek wymienionych tutaj, oraz listę innych wtyczek firm trzecich, które można znaleźć na awesome-webpack.

Wniosek

Webpack jest podobny do połączenia Gulp/Grunt i Browserify. Webpack jest w pewnym sensie niezbędny dla projektów, które mają zamiar się skalować. Dlatego jest często używany z React lub Angular.

Grunt i Gulp mogą być używane, gdy projekt jest umiarkowany, lub dość duży. Jeśli jesteś naprawdę wygodny w pisaniu funkcji JS, to Gulp jest wskazany, ale jeśli wolisz pisać konfiguracje zadań, to Grunt wystarczy.