Webpack vs Gulp vs Grunt

Af Stephen Afam-Osemene

Indledning

Med den stigende kompleksitet af Javascript-projekter og behovet for at automatisere opgaver, spore app-præstationer og udføre nogle vedligeholdelsesaktiviteter, er det blevet meget fremtrædende at beslutte, hvilken type build-værktøj der skal anvendes.Før build-værktøjer blev en nødvendighed, var det ikke klart, hvordan man håndterede rutineopgaver. Dette var ikke særlig nødvendigt, fordi Javascript ikke specielt behøvede at blive kompileret; men med projekter som single page-applikationer og fremkomsten af build-værktøjer er opgaver, der gentager sig, nu automatiseret. da det er blevet mere end en nødvendighed at bruge build-værktøjer, står softwareudviklere i denne nuværende tid over for udfordringen med at vælge et, der er perfekt til deres projekt.

I denne artikel vil vi sammenligne Grunt, Gulp og Webpack i forhold til følgende funktioner:

• Brugervenlighed
• Popularitet
• Pålidelighed
• Troværdighed
• Udvidelighed

Grunt og Gulp er task runners, mens Webpack er en modulbundler. Task runners bruges grundlæggende til at automatisere opgaver i en udviklingsproces. Nogle af disse opgaver omfatter komprimering af JS-filer, kompilering af Sass-filer, overvågning af filændringer, minificering af filer og automatisk præfiksering. module bundlers tager flere moduler i applikationen, der hver især har afhængigheder, og bundler dem til statiske aktiver. Module bundlers udfører opgaven fra task runners, og tager flere skridt videre.Forhåbentlig vil det ved slutningen af artiklen være mere klart, hvilket build-værktøj du skal bruge til dit projekt.

Brugervenlighed

Desto mere komplekst et værktøj er, desto sværere er det at bruge det. Da Gulp og Grunt er task runners, tilbyder de funktioner som minificering af kode, CSS-forbehandling, enhedstest og en liste af andre.

Sammenlignet med Grunt eller Webpack er Gulp meget nemmere at bruge. Det er muligt at starte et projekt op med Gulp på et par minutter. Grunt har dog mindre besvær med konfigurationen end Webpack.

For at sætte Gulp op, tages følgende trin

• Kontroller, at node, npm og npx er installeret
• Installer Gulp CLI ved hjælp af npm install --global gulp-cli
• Opret en pakke.json-fil til devDependencies
• Installer gulp-pakken i devDependencies ved hjælp af npm install --save-dev gulp@next
• Opret en gulp.js-fil, hvor opgaverne vil blive skrevetfunction defaultTask(cb) { // placer kode til din standardopgave her cb();}eksport.default = defaultTask

For at kunne bruge Grunt skal du gøre følgende:

• opdatér din npm ved hjælp af npm update -g npm
• Installer Grunt CLI ved hjælp af npm install -g grunt-cli
• Opsæt din pakke.json-fil, hvor dine devDependencies er opført
• Opret en Gruntfile.js-fil, hvor opgaverne er skrevet. Opgaverne skrives altid inden for denne blok:module.exports = function(grunt) { // Grunt-opgaverne går her};

Processerne for opsætning af Gulp og Grunt ligner hinanden. Gulp er dog mere udtryksfuldt; det giver dig mulighed for at skrive kode, der klart angiver sin funktion. Gulp er baseret på Node streams, hvilket giver mulighed for pipelining. Grunt er på den anden side afhængig af datakonfigurationsfiler, hvor hver kilde- og destinationsfil skal deklareres. Efterhånden som projektet bliver større, bliver Grunt endnu mere besværligt at administrere.

Hvis du f.eks. skal kompilere Sass, minificere den resulterende CSS-fil og uglificere din JS-fil ved hjælp af Grunt, vil Gruntfile.js-filen se således ud

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

Hvis den samme proces derimod skal udføres med Gulp, vil gulp.js se således ud:

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 og Grunt er begge nemmere at sætte op sammenlignet med Webpack.

For at kunne bruge Webpack skal du gøre følgende:

• Installer Nodejs og Npm
• I din terminal, opretter du en Webpack-mappe ved hjælp af mkdir folder-name
• Initialiser Nodejs-projektet ved hjælp af npm init -y
• Opret følgende filer touch index.html webpack.config.js index.js
• Installer Webpack og Webpack dev-serveren ved hjælp af npm i --save-dev webpack@latest webpack-dev-server@latest
• Installer 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: { filnavn: ‘output.js’ }}}module.exports = config;

Overstående opsætning er den grundlæggende start for Webpack. Webpack har forskellige nyttige funktioner og kan gøre så meget mere. Den overflod af muligheder, der afdækkes med Webpack, kan retfærdiggøre dens kompleksitet. Det tager mere tid at forstå, hvordan Webpack fungerer; det kan også blive besværligt, når man skal administrere flere konfigurationer til flere miljøer.

Popularitet

Målingerne til at måle populariteten af hvert af disse værktøjer er forskellige. Grunt har eksisteret længe før Gulp, og mange udviklere har brugt det flittigt. Ifølge State of JavaScript 2018-undersøgelsen rangerer Webpack dog højere end Gulp og Grunt.

Der er en stigende interesse for at lære at bruge Webpack; det er berettiget, når man ser på de mange muligheder, der stilles til rådighed ved at bruge det.

Også ved hjælp af Github-statistikker har Webpack, Gulp og Grunt over henholdsvis 41.000, 30.000 og 11.000 stjerner.

Troværdighed

Gulp, Grunt og Webpack har en stor afhængighed af plugins. Alle tre værktøjer har store fællesskaber, hvor problemer kan blive behandlet og rettet. For Gulp og Grunt er der en stor afhængighed af plugin-forfatteren til at vedligeholde plugins, og nogle gange er der kun lidt eller ingen dokumentation at falde tilbage på, når man står over for et problem. Resultatet er som regel at vente på, at disse forfattere laver opdateringer, eller at man selv løser problemerne. De fleste Webpack-plugins vedligeholdes dog af Webpacks core-team, mens resten administreres af Webpacks fællesskab; og det gør det mere pålideligt.

Udvidelighed

Gulp, Grunt og Webpack er blevet forbedret i løbet af de seneste år. De har alle mere plads til nyere og endnu mere effektive og standardiserede plugins.

En del Grunt-brugere er begyndt at tage Gulp til sig, fordi det giver mulighed for piping, og det forklarer, hvorfor Grunt efter sigende snart får en opdatering, der også giver mulighed for piping. Piping gør det muligt for gulp-brugere at knytte output fra en opgave til en anden afhængighed, hvilket gør koden kortere og gør det muligt at arbejde hurtigere.

På nuværende tidspunkt virker Gulp mere udvidelsesvenlig end Grunt, fordi det ikke er så svært at administrere gulp-filen, når projektet skaleres. Gulp bruger plugins, der hver især udfører en enkelt opgave i modsætning til Grunt, hvor et plugin kan udføre flere opgaver.

Webpack kan udvides selv ud over sin kernefunktionalitet ved hjælp af plugins og loaders, det eneste problem er de komplikationer, der kan opstå under konfigurationen. Men da Webpack bundter alle de moduler, der har afhængigheder, er det ikke så besværligt at arbejde på selv store Webpack-projekter.

I skrivende stund har Grunt 6.459 plugins i sit plugin-register, mens Gulp har 3.672 plugins opført i sit eget plugin-register. Med så mange plugins til begge dele vil du sandsynligvis kunne finde et plugin, der kan gøre det, du har brug for. webpack har sit eget sæt officielle plugins, der er opført her, og en liste over andre plugins fra tredjeparter, der kunne findes på awesome-webpack.

Slutning

Webpack svarer til en kombination af Gulp/Grunt og Browserify. Webpack er noget nødvendigt for projekter, der har intentioner om at skalere. Derfor bruges det ofte sammen med React eller Angular.

Grunt og Gulp kan bruges, når projektet er moderat, eller ret stort. Hvis du virkelig er komfortabel med at skrive JS-funktioner, så er Gulp tilrådeligt, men hvis du hellere vil skrive opgavekonfigurationer, så er Grunt tilstrækkeligt.