Share
Nel primo post di questa serie ho dato una rapida panoramica di Grunt e nel prossimo post illustrerò i passaggi necessari su come utilizzare Grunt per migliorare le tue capacità di sviluppo di WordPress.
Nello specifico, parleremo in profondità dei file necessari come package.json e Gruntfile.js, ma per ora creeremo alcuni file di esempio in modo da poter eseguire Grunt con il tuo tema WordPress o progetto plugin.
Prima di iniziare, può essere utile rivedere il contenuto menzionato nel primo articolo di questa serie.
Una volta che sarai coinvolto, torna a questo articolo e inizieremo a creare i nostri file di progetto. Questo alla fine ci darà una panoramica su come sembra che Grunt sia configurato per un dato progetto.
Nel prossimo articolo, daremo un'occhiata a come farlo specificamente per il lavoro di WordPress, ma per ora ci concentreremo su un approccio più generico.
La prima cosa che faremo è creare un package.json file nella root del progetto. All'interno di questo nuovo file, aggiungere quanto segue:
"nome": "nome-progetto", "versione": "1.0.0", "descrizione": "Progetto eccezionale"
Non c'è bisogno di aggiungere il devDependencies oggetto, in quanto verrà aggiunto automaticamente quando installeremo le attività di Grunt tramite la riga di comando.
Per installare le attività di Grunt, è necessario passare al proprio strumento da riga di comando. Se sei su un Mac, questo sarebbe Terminal o iTerm. Se si utilizza un PC, suggerirei di utilizzare PowerShell.
Per prima cosa vai al tuo progetto cartella root ('cartella di sviluppo cd / cartella di progetto'). Successivamente andremo a installare un'attività per compilare i file LESS. Stiamo per installare l'attività grunt-contrib-less, quindi digita quanto segue nella riga di comando e premi accedere:
installa npm grunt-contrib-less --save-dev
Inizierai a vedere un mucchio di righe che vengono stampate come attività e tutte le sue dipendenze vengono scaricate da npm. Una volta fatto, dovresti vedere qualcosa di simile a questo:
Ora dovresti essere in grado di andare al tuo package.json file e vedi grugnito-contrib-less aggiunto al tuo '' devDependencies oggetto pure. Aggiungerai anche il numero di versione accanto al nome. Potrei parlare della notazione della versione in un altro post, ma per ora, sappi che il tilde si riferisce alla versione con cui stiamo attualmente lavorando.
A questo punto, dovresti vedere quanto segue:
"nome": "nome-progetto", "versione": "1.0.0", "descrizione": "Progetto eccezionale", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Successivamente, aggiungiamo un'attività per controllare i cambiamenti nel nostro '.Di meno' File. Utilizzeremo il compito di grunt-contrib-watch. Torna alla linea di comando e colpisci accedere:
npm installa grunt-contrib-watch --save-dev
Anche in questo caso dovresti vedere qualche output sullo schermo e una volta completato, verrà aggiunto al tuo package.json file. Ora dovrebbe assomigliare a questo:
"nome": "nome-progetto", "versione": "1.0.0", "descrizione": "Progetto eccezionale", "devDependencies": "grunt-contrib-less": "~ 0.9.0", "grunt-contrib-watch": "~ 0.5.3"
Si spera che ora si stia imparando e si può usare lo stesso procedimento per aggiungere altre attività di Grunt. Solo un promemoria per aggiungere sempre il '--Save-dev'.
Ora che abbiamo un paio di attività Grunt installate, iniziamo ad usarle. La prima cosa che dovremo fare è creare un Gruntfile.js file nella cartella principale del nostro progetto. Qui è dove specificheremo i nostri compiti e li configureremo.
Per fare ciò, aggiungi quanto segue al file:
module.exports = function (grunt)
La prima cosa che dobbiamo fare è caricare i nostri compiti in modo che possiamo eseguirli. Lo fai aggiungendo usando il loadNpmTasks funzione per ogni compito. Si prega di aggiungere il seguente all'interno delle parentesi graffe:
grunt.loadNpmTasks ( 'grunt-contrib-less');grunt.loadNpmTasks ( 'grunt-contrib-orologio');
La prossima cosa che dobbiamo fare è configurare la configurazione per le nostre attività Grunt installate. Dobbiamo usare il initconfig funzione come questa:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),);
Ora, dopo la virgola, aggiungeremo la nostra configurazione per ogni attività che abbiamo installato. Di solito troverai esempi su come configurare ogni attività in README.md file nel progetto su GitHub. Ogni attività avrà diverse opzioni di configurazione, quindi assicurati di controllare prima la documentazione.
Il primo compito che stiamo per configurare è il grugnito-contrib-less compito. Questo compilerà il nostro .Di meno file in .css file per noi. Vorresti creare una nuova cartella per il tuo .Di meno file e crearne uno nuovo. Generalmente creo un css / meno cartella e metti tutti i miei .Di meno file in là.
Vai avanti e aggiungi un nuovo file chiamato style.less e aggiungi del codice in questo modo:
a colore: blu; &: hover color: red;
Ora, torniamo al nostro Gruntfile.js file e aggiungere il seguente:
Di meno:
opzioni:
percorsi: 'css / less',
yuicompress: vero
,
File:
'style.css': 'css / less / style.less'
Una volta salvato il file, dovresti essere in grado di passare alla riga di comando e digitare grugnito di meno e colpisci accedere. Questo darà il via al compito da grugnito e compilare il nostro .Di meno file e creare un nuovo style.css file nel nostro progetto cartella root.
Ora che abbiamo un compito per compilare il nostro .Di meno file, aggiungiamo un'attività di controllo per questo. Chi vuole andare alla riga di comando ed eseguire grugnito di meno ogni volta dopo aver apportato modifiche a un file, giusto?
Dopo la nostra precedente configurazione, aggiungi una virgola, quindi:
orologio:
Di meno:
file: 'css / less / *. less',
compiti: 'meno'
Una volta salvato il file, tornare alla riga di comando e digitare orologio da grugnito. Questo dovrebbe vedere quanto segue:
Ciò significa che l'orologio Grunt è in attesa di eventuali modifiche a uno dei file specificati nella configurazione. Vai al tuo style.less file e fare un cambiamento in questo modo:
a colore: blu; &: hover color: green;
Una volta salvato il file, l'attività di controllo inizierà e compila il tuo .Di meno file nel tuo style.css file. Una volta completato, continuerà a guardare quei file e pronto per un altro cambiamento.
Poiché è in esecuzione, tutto ciò che devi fare ora è apportare una modifica in un file, salvarlo, quindi scorrere verso il browser per vedere le modifiche.
Ora abbiamo tutto a posto per usare Grunt con il tuo prossimo progetto. Questa è stata una configurazione abbastanza semplice e sono sicuro che puoi vedere tutti i possibili compiti che puoi avere nel tuo progetto. Più avanti nella serie, sto pianificando di coprire funzionalità più avanzate con Grunt come attività personalizzate, configurazione annidata e altri gadget.
Ma prima, daremo un'occhiata a come incorporare questo nei nostri progetti WordPress.
Accentsconagua