Webpack vs Gulp vs Grunt

av Stephen Afam-Osemene

Introduktion

Med den ökande komplexiteten i Javascript-projekt och behovet av att automatisera uppgifter, spåra app-prestanda och utföra vissa underhållsaktiviteter har det blivit mycket viktigt att bestämma vilken typ av byggverktyg man ska använda.Innan byggverktyg blev en nödvändighet var det inte klart hur man skulle hantera rutinuppgifter. Detta var inte särskilt nödvändigt eftersom Javascript inte särskilt behövde kompileras, men med projekt som enkelsidiga applikationer och tillkomsten av byggverktyg automatiseras nu uppgifter som återkommer.Eftersom det har blivit mer än nödvändigt att använda byggverktyg står programvaruutvecklare i dagens läge inför utmaningen att välja ett som är perfekt för deras projekt.

I den här artikeln kommer vi att jämföra Grunt, Gulp och Webpack i förhållande till följande funktioner:

• Användarvänlighet
• Popularitet
• Pålitlighet
• Tillförlitlighet
• Utvidgänglighet

Grunt och Gulp är uppgiftslöpare, medan Webpack är en modulbunkerare. Task runners används i princip för att automatisera uppgifter i en utvecklingsprocess. Några av dessa uppgifter är komprimering av JS-filer, kompilering av Sass-filer, bevakning av filändringar, minifiering av filer och automatisk prefixering. module bundlers tar flera moduler i applikationen som var och en har beroenden och paketerar dem till statiska tillgångar. Module bundlers utför uppgiften för task runners och tar flera steg längre.Förhoppningsvis är det i slutet av artikeln tydligare vilket byggverktyg du ska använda för ditt projekt.

Användningsvänlighet

Desto mer komplext ett verktyg är, desto svårare är det att använda det. Eftersom Gulp och Grunt är uppgiftslöpare erbjuder de funktioner som kodminifiering, CSS-förbehandling, enhetstestning och en rad andra.

Vid jämförelse med Grunt eller Webpack är Gulp mycket enklare att använda. Det är möjligt att starta upp ett projekt med hjälp av Gulp på några minuter. Grunt har dock mindre problem med konfigurationen än Webpack.

För att konfigurera Gulp tas följande steg

• Kontrollera att node, npm och npx är installerade
• Installera Gulp CLI med hjälp av npm install --global gulp-cli
• Skapa ett paket.json-fil för devDependencies
• Installera gulp-paketet i devDependencies med hjälp av npm install --save-dev gulp@next
• Skapa en gulp.js-fil där uppgifterna kommer att skrivasfunction defaultTask(cb) { // placera koden för din standarduppgift här cb();}exports.default = defaultTask

För att kunna använda Grunt måste du göra följande:

• Uppdatera ditt npm med hjälp av npm update -g npm
• Installera Grunt CLI med hjälp av npm install -g grunt-cli
• Sätt upp ditt paket.json-filen där dina devDependencies listas
• Skapa en Gruntfile.js-fil där uppgifterna skrivs. Uppgifterna skrivs alltid inom detta block:module.exports = function(grunt) { // Grunt-uppgifterna hamnar här};

Processerna för att ställa in Gulp och Grunt ser likadana ut. Gulp är dock mer uttrycksfull; den låter dig skriva kod som tydligt anger sin funktion. Gulp är baserad på Node streams, vilket möjliggör pipelining. Grunt å andra sidan förlitar sig på datakonfigurationsfiler där varje käll- och målfil måste deklareras. När projektet blir större blir Grunt ännu mer besvärligt att hantera.

Om du till exempel behöver kompilera Sass, minifiera den resulterande CSS-filen och Uglify din JS-fil med hjälp av Grunt kommer Gruntfile.js-filen att se ut så här

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', );};

Om samma process å andra sidan ska göras med Gulp kommer gulp.js att se ut så här:

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 och Grunt är båda enklare att sätta upp jämfört med Webpack.

För att använda Webpack måste du göra följande:

• Installera Nodejs och Npm
• I din terminal, skapa en Webpack-mapp med hjälp av mkdir folder-name
• Intialera Nodejs-projektet med hjälp av npm init -y
• Skapa följande filer touch index.html webpack.config.js index.js
• Installera Webpack och Webpack dev server med hjälp av npm i --save-dev webpack@latest webpack-dev-server@latest
• Installera Webpack globalt npm i -g webpack@latest

• Skriv Webpacks konfiguration i filen webpack.config.js.

  const webpack = require(’webpack’);

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

Inställningen ovan är den grundläggande starten för Webpack. Webpack har olika användbara funktioner och kan göra så mycket mer. Den uppsjö av möjligheter som avslöjas med Webpack kan motivera dess komplexitet. Det tar mer tid att förstå hur Webpack fungerar, det kan också bli besvärligt när man hanterar flera konfigurationer för flera miljöer.

Popularitet

Mätvärdena för att mäta populariteten för vart och ett av dessa verktyg skiljer sig åt. Grunt har funnits långt före Gulp och många utvecklare har använt det flitigt. Enligt undersökningen State of JavaScript 2018 rankas dock Webpack högre än Gulp och Grunt.

Det finns ett växande intresse för att lära sig använda Webpack; detta är berättigat med tanke på de många möjligheter som görs tillgängliga genom dess användning.

Också med hjälp av statistik från Github har Webpack, Gulp och Grunt över 41 000, 30 000 respektive 11 000 stjärnor.

Pålitlighet

Gulp, Grunt och Webpack har ett stort beroende av plugins. Alla tre verktygen har stora gemenskaper där problem kan tas upp och åtgärdas. För Gulp och Grunt finns det ett stort beroende av att pluginförfattaren underhåller plugins, och ibland finns det lite eller ingen dokumentation att falla tillbaka på när ett problem uppstår. Resultatet blir oftast att vänta på att dessa författare ska göra uppdateringar eller lösa att åtgärda dem själv. De flesta Webpack-plugins underhålls dock av Webpacks kärnteam medan resten hanteras av Webpacks community; och detta gör dem mer tillförlitliga.

Extensibility

Gulp, Grunt och Webpack har förbättrats under de senaste åren. De har alla mer utrymme för nyare och ännu effektivare och standardiserade plugins.

En del Grunt-användare börjar anta Gulp eftersom det tillåter piping, och det förklarar varför Grunt sägs snart få en uppdatering som också tillåter piping. Piping gör det möjligt för Gulp-användare att koppla resultatet av en uppgift till ett annat beroende, vilket gör koden kortare och gör att man kan arbeta snabbare.

För närvarande verkar Gulp vara mer utbyggbart än Grunt, eftersom det inte är så svårt att hantera gulp-filen när projektet skalar. Gulp använder plugins som var och en utför en enda uppgift till skillnad från Grunt där en plugin kan utföra flera uppgifter.

Webpack kan utökas även bortom sin kärnfunktionalitet med hjälp av plugins och loaders, det enda problemet är de komplikationer som kan uppstå vid konfigureringen. Men eftersom Webpack buntar ihop alla moduler som har beroenden är det inte så mödosamt att arbeta med även stora Webpack-projekt.

I skrivande stund har Grunt 6 459 plugins i sitt plugin-register, medan Gulp har 3 672 plugins listade i sitt eget plugin-register. Med så många insticksprogram för båda, är det troligt att du hittar ett insticksprogram som gör vad du än behöver.Webpack har en egen uppsättning officiella insticksprogram som listas här, och en lista över andra insticksprogram från tredje part som kan hittas på awesome-webpack.

Slutsats

Webpack liknar en kombination av Gulp/Grunt och Browserify. Webpack är i viss mån nödvändigt för projekt som har för avsikt att skala upp. Därför används det ofta med React eller Angular.

Grunt och Gulp kan användas när projektet är måttligt eller ganska stort. Om du verkligen är bekväm med att skriva JS-funktioner är Gulp att rekommendera, men om du hellre vill skriva uppgiftskonfigurationer räcker det med Grunt.