Webpack vs Gulp vs Grunt

Door Stephen Afam-Osemene

Inleiding

Met de toenemende complexiteit van Javascript projecten en de noodzaak om taken te automatiseren, app prestaties bij te houden en sommige onderhoudsactiviteiten uit te voeren, is het erg saillant geworden om te beslissen welk type build tool te adopteren.Voordat build tools een noodzaak werden, was het niet duidelijk hoe routinematige taken moesten worden afgehandeld. Dit was niet erg nodig omdat Javascript niet in het bijzonder hoefde te worden gecompileerd; echter, met projecten zoals single page applicaties, en de komst van build tools, taken die zich regelmatig voordoen zijn nu geautomatiseerd.Zien dat het meer dan een noodzaak is geworden om build tools te gebruiken, software-ontwikkelaars in deze huidige tijd worden geconfronteerd met de uitdaging van het kiezen van een die perfect is voor hun project.

In dit artikel zullen we Grunt, Gulp en Webpack vergelijken met betrekking tot de volgende kenmerken:

• Gebruiksgemak
• Populariteit
• Betrouwbaarheid
• Extensibiliteit

Grunt en Gulp zijn task runners, terwijl Webpack een module bundler is. Task runners worden in principe gebruikt om taken in een ontwikkelproces te automatiseren. Enkele van deze taken zijn het comprimeren van JS bestanden, het compileren van Sass bestanden, het letten op bestandswijzigingen, het minifiëren van bestanden en auto-prefixing.Module bundlers nemen verschillende modules van de applicatie die elk afhankelijkheden hebben en bundelen ze in statische assets. Module bundlers voeren de taak van task runners uit, en gaan een aantal stappen verder.Hopelijk is het aan het eind van het artikel duidelijker welke build tool je moet gebruiken voor je project.

Gebruiksgemak

Hoe complexer een tool is, des te moeilijker het is om hem te gebruiken. Als task runners bieden Gulp en Grunt functies als code minification, CSS preprocessing, unit testing en een lijst met anderen.

Vergeleken met Grunt of Webpack, is Gulp een stuk eenvoudiger in gebruik. Het is mogelijk om een project met Gulp in een paar minuten op te starten. Grunt heeft echter minder configuratie rompslomp dan Webpack.

Om Gulp in te stellen, worden de volgende stappen genomen

• Controleer of node, npm, en npx geïnstalleerd zijn
• Installeer Gulp CLI met npm install --global gulp-cli
• Creëer een package.json bestand voor devDependencies
• Installeer gulp package in de devDependencies met npm install --save-dev gulp@next
• Maak een gulp.js bestand waar de taken zullen worden geschrevenfunction defaultTask(cb) { //plaats hier code voor je standaard taak cb();}exports.default = defaultTask

Om Grunt te gebruiken, moet je het volgende doen:

• Update je npm met npm update -g npm
• Installeer Grunt CLI met npm install -g grunt-cli
• Installeer je package.json bestand waar je devDependencies in staan
• Maak een Gruntfile.js bestand aan waar de taken in worden geschreven. De taken worden altijd in dit blok geschreven:module.exports = function(grunt) { // Grunt taken gaan hier naartoe};

De processen voor het opzetten van Gulp en Grunt lijken op elkaar. Echter, Gulp is meer expressief; het staat je toe code te schrijven die duidelijk zijn functie aangeeft. Gulp is gebaseerd op Node streams, waardoor pipelining mogelijk is. Grunt, aan de andere kant, vertrouwt op data configurerende bestanden waar elk bron- en doelbestand moet worden gedeclareerd. Als het project groter wordt, wordt Grunt nog omslachtiger om te beheren.

Als je bijvoorbeeld Sass moet compileren, het resulterende CSS bestand moet minifiëren en je JS bestand moet Uglifyen met Grunt, dan zal het Gruntfile.js bestand er als volgt uitzien

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

Als hetzelfde proces daarentegen met Gulp moet worden gedaan, dan zal de gulp.js er als volgt uitzien:

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 en Grunt zijn beide eenvoudiger op te zetten in vergelijking met Webpack.

Om Webpack te gebruiken, moet je het volgende doen:

• Installeer Nodejs en Npm
• In uw terminal, maakt u een Webpack-map aan met mkdir folder-name
• Installeer het Nodejs-project met npm init -y
• Maak de volgende bestanden aan touch index.html webpack.config.js index.js
• Installeer Webpack en Webpack dev server met npm i --save-dev webpack@latest webpack-dev-server@latest
• Installeer Webpack globaal npm i -g webpack@latest

• Schrijf de configuratie van Webpack in het webpack.config.js bestand.

  const webpack = require(‘webpack’);

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

De bovenstaande set-up is de basis start voor Webpack. Webpack heeft verschillende handige functies en kan nog veel meer. De overvloed aan mogelijkheden die met Webpack worden blootgelegd, rechtvaardigen misschien de complexiteit ervan. Het kost meer tijd om te begrijpen hoe Webpack werkt; het kan ook omslachtig worden bij het beheren van meerdere configuraties voor meerdere omgevingen.

Populariteit

De metrieken voor het meten van de populariteit van elk van deze tools verschillen. Grunt bestaat al lang voor Gulp, en veel ontwikkelaars hebben het veelvuldig gebruikt. Volgens de State of JavaScript 2018-enquête staat Webpack echter hoger dan Gulp en Grunt.

Er is een groeiende belangstelling voor het leren gebruiken van Webpack; dit is gerechtvaardigd gezien de brede waaier aan mogelijkheden die beschikbaar komen door het gebruik ervan.

Ook gebruikmakend van Github stats, hebben Webpack, Gulp en Grunt respectievelijk meer dan 41.000, 30.000 en 11.000 sterren.

Betrouwbaarheid

Gulp, Grunt en Webpack hebben een grote afhankelijkheid van plugins. Alle drie de tools hebben grote communities waar problemen kunnen worden aangepakt en opgelost. Voor Gulp en Grunt is er een grote afhankelijkheid van de plugin-auteur om de plugins te onderhouden, en soms is er weinig of geen documentatie om op terug te vallen als er een probleem optreedt. Het resultaat is meestal om te wachten tot deze auteurs updates maken of om zelf op te lossen. De meeste Webpack plugins worden echter onderhouden door het core team van Webpack, terwijl de rest wordt beheerd door de community van Webpack; en dit maakt het betrouwbaarder.

Extensibility

Gulp, Grunt en Webpack zijn de afgelopen jaren verbeterd. Ze hebben allemaal meer ruimte voor nieuwere en nog efficiëntere en gestandaardiseerde plugins.

Sommige Grunt-gebruikers beginnen Gulp te adopteren omdat het piping toestaat, en dat verklaart waarom Grunt naar verluidt binnenkort een update zal krijgen die ook piping toestaat. Piping stelt gulp-gebruikers in staat om de uitvoer van een taak aan een andere afhankelijkheid te koppelen, waardoor de code korter wordt en sneller werkt.

Momenteel lijkt Gulp meer uitbreidbaar dan Grunt, omdat wanneer het project schaalt, het niet zo moeilijk is om het gulp-bestand te beheren. Gulp gebruikt plugins die elk een enkele taak uitvoeren in tegenstelling tot Grunt waar een plugin meerdere taken kan uitvoeren.

Webpack kan zelfs buiten zijn kernfunctionaliteit worden uitgebreid met behulp van plugins en loaders, het enige probleem zijn de complicaties die kunnen optreden bij het configureren ervan. Maar omdat Webpack alle modules bundelt die afhankelijkheden hebben, is het niet zo lastig om zelfs aan grote Webpack-projecten te werken.

Op het moment van schrijven heeft Grunt 6.459 plugins in zijn plugin-register, terwijl Gulp 3.672 plugins in zijn eigen plugin-register heeft staan. Met zo veel plugins voor beide, zult u waarschijnlijk een plugin vinden om te doen wat u nodig hebt.Webpack heeft zijn eigen set van officiële plugins die hier worden vermeld, en een lijst van andere plugins van derden die kunnen worden gevonden op awesome-webpack.

Conclusie

Webpack is vergelijkbaar met een combinatie van Gulp/Grunt en Browserify. Webpack is enigszins noodzakelijk voor projecten die de intentie hebben om te schalen. Daarom wordt het vaak gebruikt met React of Angular.

Grunt en Gulp kunnen worden gebruikt als het project middelmatig is, of vrij groot. Als je echt comfortabel bent met het schrijven van JS-functies, dan is Gulp aan te raden, maar als je liever taakconfiguraties schrijft, dan zal Grunt volstaan.