Share
Nella prima parte di questa serie ho dato una rapida panoramica di Grunt. Ho anche parlato attraverso le diverse tecnologie che richiede per poter utilizzare. Dopodiché, sono entrato un po 'nel Gruntfile e nei compiti all'interno di esso.
Ora voglio parlare di come usare Grunt può migliorare il tuo sviluppo sia per i temi WordPress che per i plugin.
La mia parte preferita sull'uso di Grunt e npm è che quando si imposta il progetto, si autodocumentano le dipendenze del progetto. Questo è ottimo per i team di sviluppo e i progetti open source. Chi vuole scrivere la documentazione su come impostare un workspace comunque, giusto?
Innanzitutto, è necessario disporre di un file package.json nel progetto. Dovrai avere il nome, la versione e la descrizione del progetto impostati. Entreremo più nel dettaglio intorno a questo nel prossimo post, ma ecco un esempio:
"nome": "nome-progetto",
"versione": "1.0.0",
"description": "Impressionante progetto"
Una volta che hai configurato questo, quando installi un plugin per grunt, devi solo aggiungere --save-dev fino alla fine e aggiungerà il plugin al tuo file package.json sotto devDependencies. Ad esempio, se volessi aggiungere il grugnito-contrib-watch plugin per il mio progetto vorrei eseguire il seguente comando:
npm installa grunt-contrib-watch --save-dev
Vedrai il plugin aggiunto al tuo node_modules cartella e dovrebbe anche risultare nel file package.json in questo modo:
"nome": "nome-progetto",
"versione": "1.0.0",
"description": "Impressionante progetto", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Mentre installi altri plugin Grunt e aggiungi --save-dev alla fine, li vedrete aggiunti sotto il devDependencies oggetto.
Perché questo è benefico? Come ho detto prima, questo è autodocumentazione delle dipendenze dei progetti. Una volta che tutti i plugin sono stati installati e aggiunti al file package.json, ora è possibile eseguire un altro membro del team o un contributore installazione di npm e installeranno tutto il necessario per il progetto.
Puoi testarlo abbastanza facilmente eliminando il tuo intero node_modules cartella e in esecuzione installazione di npm te stesso. Vedrai tutto ciò che hai installato automaticamente.
[nota] Dovrai aggiungere il node_modules cartella al tuo .gitignore file in modo da non gonfiare il tuo repository. [/ note]
Io uso molti plugin Grunt simili per ogni progetto, ma quello che installo sempre è quello a cui ho fatto riferimento prima, grunt-contrib-watch. Questo plugin, quando eseguito, guarderà i file del tuo progetto e darà il via ad ogni attività che hai specificato per quel tipo di file o file.
Un esempio potrebbe essere per uno qualsiasi dei tuoi file JavaScript. Quando apporti delle modifiche ad una di esse e la salvi, puoi fare in modo che Grunt esegua un'attività JSLint, concat e minify. Puoi anche specificare un ordine, quindi quando ce la fai, il prossimo viene dato il via. Se uno fallisce, uccide l'intera sequenza di attività.
CodeKit ha una funzionalità simile, ma esegue tutte le tue attività. Ad esempio, se apporti una modifica a un file SASS o LESS, non solo dà il via a tali attività, ma avvia anche le attività dei file JavaScript. L'attività di visualizzazione di Grunt offre un maggiore controllo su quali attività vengono eseguite quando vengono modificati file o tipi di file specifici.
Insieme alle attività Grunt per i plugin che installi, puoi creare le tue attività personalizzate. Un sacco di volte quando ho creato un progetto ho 3 compiti che ho impostato, predefinito, impostare, e costruire.
L'attività predefinita è l'attività che verrà eseguita con l'esecuzione grugnito dalla riga di comando. Un sacco di volte mapperò il mio compito di sorveglianza su quello predefinito. È possibile aggiungere qualsiasi attività che si desidera eseguire.
L'attività di installazione che ho configurato di solito fa le cose che devono accadere solo la prima volta per impostare la configurazione del progetto. Molte volte uso Bower per caricare librerie di terze parti come Bootstrap e devo estrarle, quindi eseguire un'operazione di copia per spostare alcuni file nel mio progetto e avviare una compilazione iniziale dei file LESS e JavaScript.
L'attività di compilazione viene utilizzata per le operazioni da eseguire prima di rilasciare o distribuire il progetto. Lo faccio sempre per assicurarmi che tutto sia concatenato, minimizzato e compresso. Un ottimo esempio è l'esecuzione di grunt-contrib-imagemin per ottimizzare tutte le immagini del tuo progetto. Un altro esempio è l'utilizzo di grunt-contrib-compress per creare un file zip del tema in modo che sia facile da installare tramite l'amministratore di WordPress.
Grunt è sicuramente un ottimo strumento per i team di sviluppatori. Dalla documentazione automatica delle dipendenze del progetto alla costruzione personalizzata, Grunt ti rende efficiente. Usa Grunt per automatizzare diverse attività nel tuo progetto in modo da concentrarti sulla creazione del tuo tema o plug-in WordPress.
Accentsconagua