Webpack vs Gulp vs Grunt

Di Stephen Afam-Osemene

Introduzione

Con la crescente complessità dei progetti Javascript e la necessità di automatizzare i compiti, tracciare le prestazioni delle app ed eseguire alcune attività di manutenzione, è diventato molto importante decidere quale tipo di strumento di compilazione adottare.Prima che gli strumenti di compilazione diventassero una necessità, non era chiaro come gestire i compiti di routine. Questo non era molto necessario perché Javascript non aveva particolarmente bisogno di essere compilato; tuttavia, con progetti come applicazioni a pagina singola, e l’avvento degli strumenti di compilazione, i compiti che si ripresentano sono ora automatizzati.Vedendo che è diventato più di una necessità di utilizzare strumenti di compilazione, gli sviluppatori di software in questo momento si trovano di fronte alla sfida di sceglierne uno che è perfetto per il loro progetto.

In questo articolo, confronteremo Grunt, Gulp e Webpack in relazione alle seguenti caratteristiche:

• Facilità d’uso
• Popolarità
• Affidabilità
• Extensibilità

Grunt e Gulp sono task runner, mentre Webpack è un module bundler. I task runner sono fondamentalmente utilizzati per automatizzare i compiti in un processo di sviluppo. Alcuni di questi compiti includono la compressione dei file JS, la compilazione dei file Sass, l’attenzione ai cambiamenti dei file, la minificazione dei file e l’auto-prefixing.I module bundler prendono diversi moduli dell’applicazione che hanno dipendenze e li raggruppano in risorse statiche. I module bundler eseguono il compito dei task runner, e fanno diversi passi in più.Speriamo che alla fine dell’articolo, sia più chiaro quale strumento di compilazione usare per il tuo progetto.

Facilità d’uso

Più uno strumento è complesso, più è difficile da usare. Essendo task runner, Gulp e Grunt offrono caratteristiche come la minificazione del codice, la pre-elaborazione CSS, i test unitari e una lista di altri.

Rispetto a Grunt o Webpack, Gulp è molto più facile da usare. È possibile avviare un progetto utilizzando Gulp in pochi minuti. Grunt, tuttavia, ha meno problemi di configurazione di Webpack.

Per configurare Gulp, si seguono i seguenti passi

• Controlla che node, npm e npx siano installati
• Installa Gulp CLI usando npm install --global gulp-cli
• Crea un file package.json per devDependencies
• Installare il pacchetto gulp nelle devDependencies usando npm install --save-dev gulp@next
• Creare un file gulp.js dove saranno scritti i taskfunction defaultTask(cb) { // inserire qui il codice per il task di default cb();}exports.default = defaultTask

Per usare Grunt, devi fare quanto segue:

• Aggiorna il tuo npm usando npm update -g npm
• Installa Grunt CLI usando npm install -g grunt-cli
• Imposta il tuo file package.json dove sono elencate le tue devDependencies
• Crea un file Gruntfile.js dove sono scritti i compiti. I compiti sono sempre scritti all’interno di questo blocco:module.exports = function(grunt) { // I compiti di Grunt vanno qui};

I processi per impostare Gulp e Grunt sembrano simili. Tuttavia, Gulp è più espressivo; ti permette di scrivere codice che dichiara chiaramente la sua funzione. Gulp è basato sui flussi di Node, permettendo il pipelining. Grunt, d’altra parte, si basa su file di configurazione dei dati in cui ogni file di origine e destinazione deve essere dichiarato. Quando il progetto diventa più grande, Grunt diventa ancora più ingombrante da gestire.

Se, per esempio, avete bisogno di compilare Sass, minificare il file CSS risultante e Uglificare il vostro file JS usando Grunt, il file Gruntfile.js sarà come questo

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

D’altra parte, se lo stesso processo deve essere fatto con Gulp, il gulp.js sarà come questo:

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 e Grunt sono entrambi più facili da configurare rispetto a Webpack.

Per usare Webpack, devi fare quanto segue:

• Installare Nodejs e Npm
• Nel tuo terminale, crea una cartella Webpack usando mkdir folder-name
• Inizializza il progetto Nodejs usando npm init -y
• Crea i seguenti file touch index.html webpack.config.js index.js
• Installa Webpack e Webpack dev server usando npm i --save-dev webpack@latest webpack-dev-server@latest
• Installa Webpack globalmente npm i -g webpack@latest

• Scrivi la configurazione di Webpack nel file webpack.config.js.

  const webpack = require(‘webpack’);

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

La configurazione di cui sopra è l’inizio di base per Webpack. Webpack ha varie caratteristiche utili e può fare molto di più. La pletora di possibilità scoperte con Webpack potrebbe giustificare la sua complessità. Ci vuole più tempo per capire come funziona Webpack; può anche diventare ingombrante quando si gestiscono diverse configurazioni per più ambienti.

Popolarità

Le metriche per misurare la popolarità di ciascuno di questi strumenti sono diverse. Grunt esiste da molto tempo prima di Gulp, e molti sviluppatori lo hanno usato ampiamente. Tuttavia, secondo il sondaggio State of JavaScript 2018, Webpack si classifica più in alto di Gulp e Grunt.

C’è un crescente interesse nell’imparare a usare Webpack; questo è giustificabile vedendo la vasta gamma di possibilità rese disponibili attraverso il suo utilizzo.

Anche usando le statistiche di Github, Webpack, Gulp e Grunt hanno rispettivamente più di 41.000, 30.000 e 11.000 stelle.

Affidabilità

Gulp, Grunt e Webpack hanno una grande dipendenza dai plugin. Tutti e tre gli strumenti hanno grandi comunità dove i problemi potrebbero essere affrontati e risolti. Per Gulp e Grunt, c’è un’alta dipendenza dall’autore del plugin per mantenere i plugin, e a volte, c’è poca o nessuna documentazione a cui ricorrere quando si affronta un problema. Il risultato è di solito quello di aspettare che questi autori facciano degli aggiornamenti o risolvere il problema da soli. Tuttavia, la maggior parte dei plugin di Webpack sono mantenuti dal core team di Webpack mentre il resto è gestito dalla comunità di Webpack; e questo lo rende più affidabile.

Extensibilità

Gulp, Grunt e Webpack sono stati migliorati negli ultimi anni. Hanno tutti più spazio per plugin nuovi e ancora più efficienti e standardizzati.

Alcuni utenti di Grunt stanno iniziando ad adottare Gulp perché permette il piping, e questo spiega perché si dice che Grunt avrà presto un aggiornamento che permette anche il piping. Il piping permette agli utenti di gulp di attaccare l’output di un compito ad un’altra dipendenza, rendendo il codice più breve e di lavorare più velocemente.

Al momento, Gulp sembra più estensibile di Grunt perché quando il progetto scala, non è così difficile gestire il file gulp. Gulp utilizza plugin che eseguono ciascuno un singolo compito, al contrario di Grunt dove un plugin può eseguire più compiti.

Webpack può essere esteso anche oltre le sue funzionalità di base con l’aiuto di plugin e caricatori, l’unico problema sono le complicazioni che possono sorgere durante la configurazione. Tuttavia, poiché Webpack raggruppa tutti i moduli che hanno dipendenze, non è così scrupoloso lavorare anche su progetti Webpack di grandi dimensioni.

Al momento in cui scrivo, Grunt ha 6.459 plugin nel suo registro di plugin, mentre Gulp ha 3.672 plugin elencati nel proprio registro di plugin. Con così tanti plugin per entrambi, è probabile che troverai un plugin per fare qualsiasi cosa tu abbia bisogno.Webpack ha il suo set di plugin ufficiali elencati qui, e un elenco di altri plugin di terze parti che potrebbero essere trovati su awesome-webpack.

Conclusione

Webpack è simile a una combinazione di Gulp/Grunt e Browserify. Webpack è in qualche modo necessario per i progetti che hanno intenzione di scalare. Questo è il motivo per cui viene spesso utilizzato con React o Angular.

Grunt e Gulp potrebbero essere utilizzati quando il progetto è moderato, o abbastanza grande. Se siete davvero a vostro agio nello scrivere funzioni JS, allora Gulp è consigliabile, ma, se preferite scrivere configurazioni di compiti, allora Grunt sarà sufficiente.

.