Iniziare con Grunt

Attualmente quando si parla di sviluppo web, ci sono fattori che ci obbligano a dipendere da un gran numero di compiti che dobbiamo eseguire una volta che abbiamo realizzato il codice, e molto di più se stiamo usando JavaScript , poiché ci sono diversi strumenti di cui abbiamo bisogno per rendere la nostra applicazione il più ottimale possibile.
Poiché tutto ciò che dipende dall'essere umano tende a non essere sempre perfetto e ad essere fatto di errori, cerchiamo sempre un modo per costruire processi il più puliti possibile e automatizzarli, poiché è meno probabile che si commettano errori se mettiamo tutto la nostra attenzione su qualcosa una volta e poi lasciamo che il suo post venga eseguito su una macchina.

INGRANDIRE

È qui che entra in gioco Grugnito, che altro non è che il risultato di quella ricerca di automazione e riduzione degli errori e del risparmio di manodopera. Creato nel 2012, è cresciuto in popolarità fino ad oggi è un elemento quasi essenziale di qualsiasi ambiente che contiene JavaScript come linguaggio di sviluppo.
Cos'è Grunt?È uno strumento per la riga di comando o la console JavaScript che è responsabile dell'esecuzione di attività ripetitive e che richiedono molto tempo, ad esempio se dobbiamo minimizzare e comprimere il codice JavaScript, ogni volta che modifichiamo un file dobbiamo eseguire questi due compiti, con Grugnito questo è automatico, ogni volta che cambiamo i file Grugnito è incaricato di eseguire tali compiti.
Grazie a questo tipo di funzionalità Grugnito ha trovato una grande accoglienza nel mondo dello sviluppo, specialmente in coloro che basano il loro sviluppo intorno JavaScript con ambienti come Nodo.js o CoffeeScript, che ha portato a una grande comunità con più di 2000 plugin nei repository npm che funzionano con Grugnito.
Le applicazioni Web oggi stanno crescendo non solo in dimensioni ma anche in complessità, il che ci porta a sviluppare una quantità di codice e strumenti di compilazione che superano il limite umano per una revisione completa, ecco perché nasce lo sviluppo basato su test o TDD, e allo stesso modo, ci sono attività aggiuntive che non hanno a che fare con il codice che ci consentono di ottimizzare la nostra applicazione.
Grugnito ci aiuta con la seconda parte dell'approccio, ci consente di ridurre il tempo che dobbiamo investire nell'esecuzione delle attività e quindi ci aiuta a rispettare il principio ASCIUTTO, per non ripeterci. Ecco perché dobbiamo usare Grugnito per risparmiare tempo e diminuire la nostra probabilità di commettere errori.
Sappiamo già cos'è e perché dovremmo usarlo, ma c'è ancora un po' di cui parlare Grugnito, dove una delle cose più importanti è sapere quali vantaggi ci porta, da una maggiore coerenza nella nostra applicazione all'avvicinamento alla comunità degli sviluppatori, quindi vediamo i vantaggi un po' più in dettaglio.
EfficienzaA volte pensiamo che fare le cose manualmente ci risparmi il tempo di dover indagare e implementare alcuni strumenti, ma si scopre che il tempo accumulato a settimana o al mese diventa eccessivo, dove possiamo perdere fino a 4 o 5 ore, con Grugnito questo è ridotto, poiché semplicemente una volta automatizzato il compito, alla fine della giornata liberiamo quelle esecuzioni dalle nostre mani.
ConsistenzaCome abbiamo accennato all'inizio, l'essere umano è incline agli errori e quindi automatizzando possiamo ridurli, Grugnito Ci dà l'opportunità di eseguire tutto esattamente nel modo in cui abbiamo verificato che non contenga errori, eliminando così il fattore umano dall'equazione e ottimizzando i nostri compiti.
EfficaciaCostruendo una serie di attività automatizzate, possiamo far sì che la nostra mente affronti i problemi che richiedono davvero la nostra attenzione ed eseguendo meno attività saremo meno stanchi, quindi saremo più efficaci.
ComunitàSe c'è qualcosa di cui abbiamo pensato di aver bisogno per il nostro ambiente automatizzato, sicuramente esiste, ed è che grazie ai grandi vantaggi di Grugnito È stata creata una forte comunità di plugin che possiamo utilizzare liberamente e gratuitamente molte volte, risparmiando così molto più lavoro.
Una volta conosciuti i concetti teorici, i vantaggi, i motivi per utilizzarlo e altri aspetti interessanti di GrugnitoÈ tempo di mettere in pratica tutto ciò che abbiamo imparato, quindi iniziamo installando questo fantastico strumento nel nostro ambiente.
Grugnito È multipiattaforma, quindi possiamo usarlo su Windows, Mac e Linux, per motivi pratici durante questo tutorial vedremo l'installazione in un ambiente finestreTuttavia, il processo non è molto diverso negli altri sistemi una volta soddisfatto il requisito iniziale.
Nodo.js e il suo gestore di pacchetti e moduli npm sono il requisito principale prima dell'installazione Grugnito, attualmente entrambi gli strumenti vengono forniti nella stessa installazione, quindi dobbiamo solo installare Nodo.js Nel nostro sistema, questo processo è molto semplice ed è stato spiegato in altri tutorial, tuttavia, basta visitare il sito Web ufficiale del progetto nodejs.org per scoprire come installare per il nostro sistema operativo.

INGRANDIRE

Una volta che abbiamo scaricato e abbiamo Nodo.js in esecuzione sul nostro sistema siamo pronti per il passaggio successivo.
L'installazione di Grugnito è molto semplice, otterremo lo strumento Grunt CLI, cioè l'interfaccia a riga di comando, che è ciò che ci permetterà di usare la console come nostro modo di indicare a Grugnito i compiti da portare a termine. Per questo useremo npm e i suoi repository sempre aggiornati all'ultima versione stabile del progetto.
Per fare ciò, dobbiamo semplicemente eseguire le seguenti istruzioni nella nostra console di comando:

 npm install -g grunt-cli

Questa azione ci lascerà lo strumento già installato come vediamo nello screenshot seguente della nostra console.

Come abbiamo potuto vedere, l'installazione è stata molto semplice e in pochi secondi lascia il nostro sistema pronto per l'uso Grugnito. Ora dobbiamo andare in una cartella in cui risiede un progetto con cui vogliamo collegarci Grugnito ed eseguiamo la seguente istruzione:

 npm install grunt

Questo ci permetterà di incorporare Grugnito nel nostro progetto e quindi iniziamo ad usarlo, vediamo cosa ci dice la console quando lo facciamo:

Il nostro prossimo passo ora è generare i file pacchetto.json sì Gruntfile.js, entrambi sono vitali per la nostra applicazione in modo che possiamo soddisfare tutte le dipendenze di cui abbiamo bisogno e anche indicare a Grugnito cosa fare in modo efficace. Questi file sono fondamentali poiché sono una sorta di framework, su cui npm sì Grugnito saranno supportati, se non esistono nel nostro progetto avremo problemi nell'utilizzo dello strumento.
Per generare il contenuto del pacchetto.json Ci basta usare un comando che ci dia una configurazione iniziale, per questo dobbiamo prima creare un file vuoto chiamato pacchetto.json, è molto importante che al suo interno contenga due parentesi graffe {} in modo che venga interpretato come JSON, quindi nella nostra console dobbiamo eseguire quanto segue nella stessa directory del nostro progetto:

 npm install --save grunt grunt-contrib-uglify

Che ci darà il seguente messaggio nella console di comando:

Finalmente se vediamo il nostro file pacchetto.json Vedremo che è stato aggiornato con il seguente contenuto:

Ora dobbiamo creare il file Gruntfile.js, questo è chi lo dirà Grugnito tutto ciò che deve essere eseguito nel nostro ambiente quindi è una parte vitale, la struttura di base di questo file è la seguente:

 module.exports = function (grunt) {// ecco il contenuto dei nostri compiti};

Dopo il commento è che possiamo posizionare le nostre diverse attività pianificate, che verranno eseguite quando eseguiremo il comando grugnito tutte le istruzioni che abbiamo inserito in questo file vengono eseguite nella nostra console.
Poiché abbiamo già visto abbastanza contenuti, lasceremo la creazione di attività automatizzate per un'altra volta, l'importante è che abbiamo capito che è Grugnito, quali sono i requisiti necessari per installarlo e tutto ciò che ci offre.
Con questo concludiamo questo tutorial, se vogliamo andare un po' più in profondità possiamo entrare nella documentazione ufficiale dello strumento che è in inglese e quindi avanzare alcune conoscenze che possiamo mettere in pratica in seguito.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo