Come usare Node.js, npm e yarn sul PC con webpack, gulp, Grunt, Bower: guida rapida per sviluppatori impegnati

Sebbene Node.js sia un ambiente di esecuzione backend, sempre più spesso è necessario anche sui nostri PC per trasformare i file SASS e LESS in CSS, unire i JS e, in generale, svolgere altre operazioni tramite webpack, gulp e Grunt. In questa guida rapida vedremo dunque i principali comandi per lavorare con Node.js, npm e i pacchetti più diffusi

Intendiamoci: l'obbiettivo di questa guida non è trattare con minuzia di particolari tutte le opzioni e le situazioni operative relative a Node.js, né vedere come avviare un nuovo progetto. Al contrario: lo scopo è fornire agli sviluppatori web una risorsa rapida per lavorare su un progetto preesistente che utilizzi webpack, gulp, Grunt e/o Bower e svolgere l'operatività minima necessaria per eseguire questi tool, raggiungere il risultato cercato e proseguire poi con le proprie attività su HTML, CSS, JS, PHP eccetera.

Per prima cosa: installare Node.js e npm

Il primo passo per lavorare con questi strumenti consiste nell'installare Node.js e il relativo gestore di pacchetti, npm. Per seguire la presente guida non serve altro, ma almeno questi due componenti di base devono essere presenti sul PC. Abbiamo dettagliato tutta la procedura, passo per passo, in quest'altro approfondimento dedicato:

» Leggi: Come installare Node.js e npm su Ubuntu (nuove versioni) - La Guida Definitiva

Una volta ottenuti Node.js e npm, passiamo ad ispezionare la cartella che contiene il progetto al quale dobbiamo lavorare per capire quali siano le specifiche necessità.

Node.js e npm sul PC, Passo 1: Trovare package.json

Pressoché la totalità dei progetti che impiegano Node.js contiene perlomeno il file package.json. Si tratta del file di configurazione che contiene la lista delle dipendenze, ovvero i pacchetti necessari al progetto per funzionare. Esempi di dipendenze sono node-sass (un pacchetto per trasformare il codice SASS in tradizionale CSS), ma anche jQuery, Bootstrap e quant'altro.

La prima cosa da fare è dunque individuare la cartella che contiene tale file. Spesso è nella root del progetto, ma non sempre è così. Il mio consiglio è dunque di utilizzare le funzioni di ricerca del sistema operativo o dell'ambiente di sviluppo (IDE) per individuare tale file.

Una volta aperto (si tratta di un semplice file testuale), troveremo qualcosa di simile a questo:

La potenza di questo strumento sta nella comodità con cui possiamo scaricare facilmente tutti questi pacchetti, con un solo comando da impartire al gestore di pacchetti (package manager) ovvero l'applicazione incaricata di leggere questo file e copiare all'interno del progetto quanto lì indicato.

Vedremo il comando da lanciare per attivare il package manager e scaricare le dipendenze fra un attimo, ma chiariamo subito che tali dipendenze saranno conservate nella cartella node_modules, generata automaticamente nella stessa directory nella quale si trova il relativo package.json

Non è necessario preoccuparsi dei file contenuti in questa cartella perché vengono gestiti automaticamente dal package manager. Basta ricordare "a cosa serve", ovvero: contenere le dipendenze.

Per chi usi Git: la cartella node_modules NON va committata. Di più: è importante aggiungerla al file .gitignore, di modo che venga completamente ignorata.

Node.js e npm sul PC, Passo 2: npm o Yarn?

I progetti che impiegano Node.js utilizzano principalmente uno fra due gestori di pacchetti:

• npm
• Yarn

I programmi sono differenti, ma l'obbiettivo è il medesimo: leggere e scaricare le dipendenze elencate nel file package.json (il formato del file è il medesimo sia per npm, sia per Yarn)

Ma... come facciamo a scoprire se dobbiamo usare npm oppure Yarn? Ebbene: basta verificare la presenza di due file specifici nella stessa cartella nella quale si trova package.json:

• se è presente un file di nome package-lock.json => dobbiamo usare npm
• se è presente un file di nome yarn.lock => dobbiamo usare Yarn

In caso siano presenti entrambi, oppure non sia presente nemmeno uno die due, significa che chi ci ha passato il progetto sta facendo molta confusione. È dunque necessario contattarlo per chiarire se usare npm o Yarn. In caso non sia disponibile nessuno con cui parlare e dovessi arrangiarti... prova innanzitutto con npm: è maggiormente usato e dovrebbe funzionare. Se non è così... prova con Yarn.

Node.js e npm sul PC, Passo 3: Installare le dipendenze con npm

Se il progetto include un file di nome package-lock.json, dobbiamo dunque usare npm per scaricare le dipendenze. Allo scopo, apri il terminale nella stessa cartella nella quale si trova il file package.json e impartisci questo comando:

npm install

Così facendo, npm scaricherà tutti i componenti necessari.

Nota che, pressoché nella totalità dei casi, appariranno una serie di avvisi (WARN) durante l'esecuzione: è assolutamente normale e non pregiudica il corretto funzionamento dell'applicazione. Seppur lo desiderassimo, in molti casi non è materialmente possibile intervenire e risolvere i problemi alla base di questi avvisi poiché sono generati, indirettamente, dai pacchetti che stiamo installando.

Eventuali problemi realmente "bloccanti" sono mostrati in rosso, con la dicitura ERR!. Nell'immagine seguente, ad esempio, il problema è che uno dei pacchetti scaricati richiede l'interprete Python, che non è presente sul sistema e va installato manualmente (sudo apt install python2 -y) prima di eseguire nuovamente npm install

Per chi usi Git: entrambi i file (sia package.json sia package-lock.json) devono sempre essere posti sotto controllo di versione e aggiunti al repository. Detta in modo meno formale: sì, devi committarli e pusharli entrambi.

Node.js e npm sul PC, Passo 4: Installare le dipendenze con Yarn

Se il invece il progetto include un file di nome yarn.lock, devi usare Yarn per scaricare le dipendenze. Contrariamente a npm, Yarn non è generalmente installato insieme a Node.js. Impartisci questo comando per verificare se è presente:

yarn --version

Se viene restituito un numero di versione simile a 3.3.1, puoi proseguire. Se invece ottieni un errore simile a "comando non trovato", segui le indicazioni di questa guida dedicata per installare Yarn ora:

» Leggi: Come installare Yarn e Node.js su Ubuntu - Guida Definitiva

Scaricare le dipendenze con Yarn è molto semplice. Apri il terminale nella stessa cartella nella quale si trova il file package.json e impartisci questo comando:

yarn install

Anche in questo caso valgono le medesime considerazione relative ai warning già esposte in precedenza. In breve: fino a quando non vedi error, va tutto bene.

Per chi usi Git: entrambi i file (sia package.json sia yarn.lock) devono sempre essere committati e pushati.

Node.js e npm sul PC, Passo 5: Eseguire comandi con npx

Quello che devi capire ora è che npm install oppure yarn install hanno scaricato anche alcuni programmi eseguibili, fra i quali potresti trovare webpack, gulp, Grunt, Bower e molti altri. Detti programmi risiedono dentro le rispettive sotto-cartelle della directory node_modules. Ma non te ne devi preoccupare, poiché questi programmi non vanno lanciati "direttamente". Al contrario: si utilizza il comando npx, fornito e installato automaticamente dal pacchetto npm, seguito dal nome del programma che desideriamo utilizzare

La sintassi generale di npx è la seguente:

npx nomeComando opzioniComando

Vedremo alcuni esempi fra un attimo.

Per il momento, ricorda soltanto che, affinché npx possa funzionare, devi:

• aver eseguito npm install oppure yarn install almeno una volta
• posizionare il terminale nella stessa cartella che contiene il file package.json e la cartella node_modules

Fai attenzione al secondo punto: devi essere allo stesso livello di node_modules, NON all'interno di essa

Ricorda anche che non puoi eseguire questi programmi da una posizione qualsiasi: devi proprio posizionarti con il terminale all'interno della cartella che contiene il tuo progetto.

Node.js e npm sul PC, Passo 6: bower.json e bower_components

Se nel progetto è presente un file di nome bower.json (di nuovo: usa le funzioni di ricerca del sistema operativo o dell'IDE per cercarlo), significa che è stato usato Bower: un ulteriore gestore di pacchetti, ma progettato per scaricare le risorse frontend (CSS, JS ecc.).

bower.json ha un aspetto simile a questo:

Per proseguire dobbiamo quindi lanciare il programma Bower di modo che legga tale file e scarichi le risorse indicate nello stesso.

Come spiegato un attimo fa, l'eseguibile di Bower è già stato scaricato tramite npm install oppure yarn install. Di conseguenza, è sufficiente invocarlo tramite npx. Il comando è il seguente:

npx bower install

Bower genera una cartella di nome bower_components che contiene gli asset scaricati

Node.js e npm sul PC, Passo 7: Grunt e Gruntfile.js

Se il progetto comprende un file di nome Gruntfile.js, è necessario lanciare anche Grunt: si tratta di un "JavaScript Task Runner", ovvero un programma che che svolge le azioni specificate nel proprio file di configurazione. Queste "azioni" consistono generalmente nell'invocare altri moduli Node.js, unire e minificare i vari .js, spostare e copiare file da una cartella ad un'altra e via dicendo.

Aprendo Gruntfile.js con un editor di testo troveremo qualcosa di simile a questo:

Ma la parte che più ci interessa per gli scopi del presente articolo è quella relativa alle chiamate grunt.registerTask, generalmente poste alla fine del file. Ognuna di queste direttive rende disponibile infatti un argomento con il quale invocare Grunt per svolgere le azioni indicate. Nello screenshot seguente, ad esempio, vediamo che è sono stati previsti:

• un task default (ovvero quello che viene eseguito se si esegue Grunt senza alcun parametro) che si limita ad eseguire il task denominato dev presente poco sotto
• un task di nome dev che esegue le azioni indicate fra parentesi quadre
• un task di nome build che esegue le azioni indicate fra parentesi quadre

Forti di questa informazione, intuiamo che chi ha preparato questo Gruntfile.js si aspetta che venga eseguito il task dev nell'ambiente di sviluppo, e quello build in produzione.

Facciamo ora! Per quanto spiegato in precedenza, l'eseguibile di Grunt è già stato scaricato tramite npm install oppure yarn install. Di conseguenza, è sufficiente invocarlo tramite npx. Il comando è il seguente:

npx grunt dev

Di nuovo: ho usato l'argomento dev perché abbiamo scoperto poco fa, ispezionando il Gruntfile.js, essere uno dei task registrati. In caso fosse stata presente una ipotetica direttiva grunt.registerTask('pippo', [...]);, avremmo potuto eseguire il relativo task invocando

npx grunt pippo

Node.js e npm sul PC, Passo 8: Gulp e gulpfile.js

Se nel progetto è presente un file di nome gulpfile.js, significa che devi invocare gulp. Anche in questo caso, siamo davanti ad un tool che esegue sequenzialmente molteplici operazioni di preparazione sui file: è sostanzialmente un'alternativa al già citato Grunt, ma che legge un proprio formato di file, incompatibile con il concorrente.

Ispezionando con un editor di testo il tuo gulpfile.js, troverai qualcosa di simile a questo:

La sezione più rilevante per i nostri scopi è quella che contiene le direttive exports.. Nell'esempio seguente vediamo che sono definite:

• exports.js
• exports.scss
• exports.svg
• exports.default
• exports.watch

Ogni parola dopo exports. rende disponibile l'omonimo argomento da passare al comando gulp per eseguire le azioni associate. Detto comando gulp, come spiegato in precedenza, è già stato scaricato tramite npm install oppure yarn install. Di conseguenza, è sufficiente invocarlo tramite npx in questo modo:

npx gulp js

L'argomento js corrisponde appunto ad uno dei task definiti all'interno del file, e svolge le azioni associate. Poiché è definito anche un exports.default, possiamo lanciare gulp senza argomenti per eseguirlo:

npx gulp

Node.js e npm sul PC, Passo 9: webpack e webpack.config.js

Webpack è un altro strumento potentissimo per scaricare, accorpare, spostare e trasformare file. Sebbene la "filosofia" e l'architettura sia molto differente, nella pratica webpack può essere considerato un'alternativa ai già citati Grunt e gulp.

Puoi riconoscere la necessità di utilizzare webpack dalla presenza del suo file di configurazione, webpack.config.js. Aprendolo con un editor di testo, troveremo qualcosa di simile a questo:

Segnalo anche la variante utilizzata da Webpack Encore, un componente del framework PHP Symfony. Il formato del file è un po' diverso, ma la sostanza non cambia

Eseguire webpack è molto semplice. Apri il terminale nella stessa cartella nella quale si trova il file package.json e impartisci questo comando:

npx webpack

Saranno così svolte automaticamente tutte le istruzioni indicate nel file di configurazione.

Conclusioni

In questo articolo abbiamo visto come usare Node.js, npm e yarn sul PC con webpack, gulp, Grunt, Bower ma, una volta compreso il meccanismo di base e l'utilizzo del comando npx, potremo sfruttare il medesimo flusso di lavoro anche con qualsiasi altro strumento analogo basato su Node.js.