Crea la nostra prima attività con Grunt

L'installazione e la costituzione del Grugnito È qualcosa di abbastanza semplice da fare, ma una volta che abbiamo tutti gli strumenti e conosciamo alcuni dei comandi di base, spesso ci chiediamo, cosa possiamo fare ora? Il passaggio successivo è molto semplice, è ora di iniziare a creare attività.
L'idea alla base di un'attività è che sia qualcosa che possa risolvere problemi frequenti o attività che svolgiamo sempre durante la nostra giornata lavorativa o lo sviluppo di applicazioni, dove, essendo di natura ripetitiva, possiamo impostare parametri per queste attività e quindi possono sempre funzionare senza la necessità di doverli fare da zero.
RequisitiQuesto tutorial ti consiglia di conoscere i fondamenti di base di JavaScript perché useremo molte cose da questa lingua. Un altro requisito essenziale è che dobbiamo aver installato e configurato Grugnito nel nostro sistema o sandbox, questo significa che dobbiamo avere Nodo.js, il tuo gestore di pacchetti npm ed ovviamente Grugnito. Infine dobbiamo avere un editor di testo per creare il contenuto dei nostri esercizi e permessi sufficienti per creare file ed eseguire liberamente il comando grunt nella console.
Un compito è un'attività che ha un inizio, uno sviluppo e una fine, in Grugnito un compito non è altro che una funzione in JavaScript che è contenuto nel file Gruntfile.js e che durante l'esecuzione del comando grugnito nella nostra console possiamo far eseguire questa funzione, provocando l'avvio del suo contenuto.
I compiti sono gestiti in modo modulare, molto nello stile della costituzione di base di Nodo.jsPertanto, ogni volta che definiamo un nuovo insieme di attività, dobbiamo aggiungere le istruzioni che indicano la loro modularità.
Per creare un'attività abbiamo bisogno di un codice di base nel nostro file gruntfile.js, questo codice si chiama boilerplate perché è ripetitivo, tuttavia lo usiamo solo una volta, vediamo come si presenta:

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

Una volta inserito quel codice nel nostro file, abbiamo già la base o la costituzione per poter creare i nostri compiti. Fatto ciò, eseguiremo un'attività che ci consentirà di scrivere un messaggio tramite console, per questo scriveremo il seguente codice:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {console.log ('Ciao, abbiamo lanciato un messaggio in Grunt.');});};

Quello che abbiamo fatto è molto facile da spiegare, prima abbiamo preso l'oggetto grugnito che creiamo con il nostro codice boilerplate, quindi in questo oggetto abbiamo eseguito il metodo registerTask cosa ci aiuta a raccontare Grugnito che stiamo aggiungendo un nuovo compito, atto successivo gli diamo un nome e poi con una funzione anonima gli passiamo il contenuto del nostro compito, che in questo caso è il messaggio sulla console.
Vediamo come appare questo esempio durante l'esecuzione dell'attività, poiché nella cartella in cui salviamo il nostro file gruntfile.js eseguiremo il seguente comando:

 grugnito

Dove poi la console dovrebbe darci un risultato come il seguente:

È importante ricordare che usiamo il nome predefinito per questa attività perché è l'attività che Grugnito cercherà per impostazione predefinita come indica il nome nel nostro file gruntfile.js, se non avesse quel nome otterremmo un errore durante l'esecuzione grugnito come vediamo nell'immagine seguente:

Il nostro esempio precedente, sebbene funzioni, non è il più consigliato, abbiamo semplicemente fatto uso della console Nodo.js ma questo non ha tutte le funzionalità e le proprietà della console Grugnito quindi, se disponiamo di ulteriori informazioni dal motore delle attività, sicuramente non le vedremo. Ecco perché dobbiamo usare la console del nostro motore di automazione delle attività, il concetto in filosofia è praticamente lo stesso solo che cambiamo gli oggetti e le funzioni che dobbiamo chiamare.
Vediamo nel codice seguente come possiamo riscrivere il nostro codice dall'esempio precedente per essere in grado di soddisfare ciò che abbiamo spiegato:

 module.exports = function (grunt) {grunt.registerTask ('default', function () {grunt.log.writeln ('Questo messaggio viene visualizzato dalla console di Grunt.');});};

Come vediamo riutilizziamo solo l'oggetto grugnito iniziale del file, quindi usiamo la sua classe tronco d'albero e infine il metodo scrivere, il risultato è lo stesso dell'esempio precedente solo con la differenza che abbiamo usato qualcosa di più ottimale per i nostri scopi. Vediamo nell'immagine seguente come tutto è stato correttamente mantenuto:

All'inizio abbiamo parlato di task riutilizzabili e che ci permettono di risparmiare tempo, una delle cose che ci può permettere di raggiungere un adeguato grado di riutilizzo dei task è la possibilità di aggiungere parametri ad essi, con questo possiamo modificare alcuni valori ​​secondo la situazione in cui possiamo trovarci, come creare utenti per un sistema direttamente con Grugnito, con cui possiamo passare come parametro un nome di file con l'elenco degli utenti.
Nel codice seguente faremo qualcosa di molto interessante, prima di tutto vedremo come creare attività che non sono il nostro processo predefinito, con questo avremo già la chiave per avere più attività nello stesso file. Il parametro che riceverà il nostro compito sarà semplicemente impostato nella funzione anonima, in questo modo possiamo catturarlo ed elaborarlo nel corpo di esso.
Vediamo il codice per generare questo task, per esercizio possiamo inserire detto codice dopo il nostro task predefinito per testare quanto spiegato:

 grunt.registerTask ('saluto', funzione (nome) {grunt.log.writeln ('ciao:' + nome + 'buongiorno oggi');});

Ora per effettuare la chiamata alla console dell'attività, facciamo semplicemente quanto segue:

 grugnito saluta: Nome

Come possiamo vedere posizioniamo il nome dell'attività e con i due punti separiamo per passare il parametro necessario, in questo caso il nome che vogliamo inviare all'attività, vediamo come appare nella nostra console:

Ora cosa succede se il nostro compito richiede che passiamo due o più parametri, semplicemente nel codice degli stessi li stiamo aggiungendo separati da virgole come funzione JavaScript normale, e quando li chiamiamo nella console possiamo posizionarli con lo stesso modo di separazione, vediamo un codice in cui eseguiamo un'attività che ci mostra questo:

 grunt.registerTask ('add', function (value1, value2) {var sum = Number (value1) + Number (value2); grunt.log.writeln ('Il risultato dell'addizione' + value1 + '+' + value2 + ' è: '+ somma);});

Ora vediamo come appare quando eseguiamo attraverso la console questo esempio con la chiamata e la risposta:

Qualcosa di interessante che potremmo notare è che usiamo JavaScript Piatto e semplice da definire l'elaborazione, l'uso di questo linguaggio è molto importante poiché in questo modo saremo in grado di estendere la nostra capacità di tutto ciò che possiamo ottenere al momento di costruire i nostri compiti con Grugnito.
È possibile utilizzare avvisi nei nostri compiti, con questo possiamo convalidare un po' i parametri ricevuti dall'utente, ad esempio il nostro compito precedente è una somma ma se mettiamo qualcosa di diverso da un numero sicuramente la nostra operazione fallirà, quindi possiamo fare quanto segue: con l'aiuto del metodo avvisare () Convalideremo che entrambi i parametri sono numeri e nel caso in cui non lo siano, lanceremo un avviso:

 grunt.registerTask ('add', function (value1, value2) {if (isNaN (Number (value1))) {grunt.warn ('Il primo valore' + value1 + 'deve essere un numero.');} if ( isNaN (Number (value2))) {grunt.warn ('Il secondo valore' + value2 + 'deve essere un numero.');} Var sum = Number (value1) + Number (value2); grunt.log.writeln ( 'Il risultato della somma di '+ value1 +' + '+ value2 +' è: '+ sum);});

Nel nostro codice riscritto abbiamo convalidato che se il risultato della conversione in Numero () dei parametri non è un numero lanciare il metodo avvisare () o avviso, questo interrompe il thread e visualizza il messaggio, così possiamo evitare un'attività difettosa. Vediamo come appare nella nostra console durante l'esecuzione dell'attività:

Come notiamo anche la conoscenza della lingua JavaScript È molto importante quindi se siamo al di sotto del livello che vogliamo raggiungere dobbiamo esercitarci e cercare di fare più esercizi possibili per migliorare le nostre capacità.
Con questo abbiamo finito questo tutorial, poiché vediamo la creazione di attività con Grugnito Non è molto complesso, anzi la sua logica al momento della loro definizione ci aiuta a facilitare la comprensione dell'uso dello strumento. La vera complessità sta nella definizione della nostra stessa logica al momento di sapere cosa farà il nostro compito e come possiamo renderlo il più riutilizzabile possibile, poiché se non lo è, lavoreremo invano.