Un'introduzione al grugnito

Oggi, la maggior parte degli sviluppatori Web front-end impiega molto tempo con tecnologie come Sass, LESS, HTML e JavaScript. Gli ultimi due anni sono stati momenti entusiasmanti nello sviluppo del web e tecnologie come Grunt hanno contribuito a tale entusiasmo.

In questa serie, ho intenzione di presentarti a Grunt e di parlare di come può migliorare il nostro sviluppo di temi e plug-in di WordPress. Lavoreremo anche per impostare Grunt per prepararlo per l'uso nel tuo prossimo progetto. Infine, daremo un'occhiata anche agli strumenti della riga di comando.

A proposito di Grunt

Grunt è uno strumento di automazione per gli sviluppatori front-end. È scritto in JavaScript, quindi dovrebbe essere carino da capire e capire se conosci JavaScript. Ecco la descrizione dal sito Web di Grunt:

In una parola: automazione. Minore è il lavoro da svolgere quando si eseguono attività ripetitive come minification, compilation, unit test, linting, ecc., Più facile diventa il lavoro. Dopo averlo configurato, un task runner può fare gran parte di quel lavoro banale per te, e il tuo team, con uno sforzo praticamente zero.

Grunt è uno strumento agnostico del sistema operativo, quindi se lo sviluppate su Mac, Windows o Linux, dovreste essere in grado di usarlo. Questo rende davvero eccezionale per i team più grandi che hanno una combinazione di piattaforme con cui si sviluppano. La parte migliore è che mentre imposti il ​​tuo progetto con Grunt, è facilmente condivisibile anche per gli altri. Lo copriremo di più in un altro post.

Node.js

Per quelli di voi che non hanno lavorato o sentito parlare, Node.js è un runtime JavaScript. È davvero decollato negli ultimi anni e tecnologie come Grunt e Bower hanno davvero contribuito ad accelerare l'adozione. Ecco la descrizione dal sito web del nodo:

Node.js è una piattaforma basata sul runtime JavaScript di Chrome per creare facilmente applicazioni di rete veloci e scalabili. Node.js utilizza un modello di I / O non bloccato e basato sugli eventi che lo rende leggero ed efficiente, perfetto per applicazioni in tempo reale ad alta intensità di dati che funzionano su dispositivi distribuiti.

Il nodo è il prerequisito per utilizzare Grunt e devi installarlo sulla tua macchina e possibilmente sui tuoi server. Grunt usa npm per installare e gestire i plugin. Puoi leggere ulteriori informazioni sui requisiti nella pagina Guida introduttiva sul sito web di Grunt.

Gruntfile

Dopo aver installato le attività necessarie per l'installazione del progetto, è necessario un modo per eseguirle. È qui che entra in gioco il file Gruntfile.js. Il Gruntfile specifica quali compiti includere e le opzioni specificate per eseguirli.

È qui che molto probabilmente specificerai i tuoi obiettivi e le tue fonti per ogni attività. Un esempio potrebbe puntare ai file .scss precompilati e specificare la posizione in cui si desidera salvare i file .css compilati. Specificherai anche altre opzioni che ogni plugin avrà a tua disposizione. Questi sono solitamente documentati con ciascun plugin.

Compiti

I compiti sono davvero dove il potere è secondo me. Un'attività è semplicemente un modo per eseguire un gruppo di plug-in. È necessario specificare un'attività predefinita che viene eseguita quando si esegue 'grugnito'. È possibile utilizzare l'attività di controllo in modo da poter eseguire automaticamente attività o plug-in quando si modificano determinati file nel progetto.

Ho intenzione di entrare in attività di più in un post successivo.

Conclusione

Grunt è sicuramente uno strumento che dovresti sapere se sei un front end o sviluppatore WordPress. Questa citazione dal sito Grunt riassume davvero le cose,

L'ecosistema di Grunt è enorme e cresce ogni giorno. Con letteralmente centinaia di plugin tra cui scegliere, puoi usare Grunt per automatizzare qualsiasi cosa con il minimo sforzo. Se qualcuno non ha già costruito ciò di cui hai bisogno, creare e pubblicare il tuo plugin Grunt su npm è un gioco da ragazzi.

Se non l'hai già usato nei tuoi progetti, dovresti assolutamente prenderlo in considerazione.

risorse

  • Grugnito
  • Node.js
  • Runtime JavaScript di Chrome
  • Grunt Guida introduttiva
  • Grunt Contrib Watch Task