Share
In questo tutorial, daremo un'occhiata a come usare Grunt, in particolare per aiutare e accelerare il flusso di lavoro di sviluppo di WordPress.
Grunt è un runner di attività JavaScript installato tramite NPM che viene eseguito sul tuo server. Per utilizzare le informazioni in questo tutorial, è necessario l'accesso da riga di comando a un server. Per brevità, vi rimando a questo tutorial per far funzionare Grunt e renderlo pronto all'uso.
Grunt è un collaudato task runner, utilizzato in molti modi diversi, su molte piattaforme diverse. Qui, cercheremo di definire una solida base su cui basare lo sviluppo di WordPress.
La comunità di Grunt è incredibilmente forte, il che ha portato allo sviluppo di un immenso catalogo di plugin. È facile perdersi e dedicare molto tempo alla ricerca e al controllo, quali utilizzare.
Quindi quali sono alcune attività comuni che ogni tema o plugin di WordPress deve realizzare o fornire?
Grunt ha un pacchetto di localizzazione specifico per WordPress di grande successo chiamato grunt-wp-i18n. Questo pacchetto Grunt ha un valore inestimabile dato che analizzerà la cartella del tema / plugin, troverà tutte le stringhe di traduzione e compilerà a .pentola file nella posizione specificata. Questo .pentola il file può quindi essere utilizzato per convertire .Po e .momento file per altri utenti per tradurre il tuo tema / plugin.
Per configurare il pacchetto, aggiungi quanto segue al tuo Gruntfile.js initconfig opzioni:
makepot: target: options: include: ['path / to / some / file.php'], digita: 'wp-plugin' // o 'wp-theme'
Quindi chiama il compito Grunt in questo modo (mentre nel file Gruntfile.js cartella):
grugnito
L'intera cartella viene sottoposta a scansione e tutte le stringhe sono conformi a un file pot.
Tutti i temi e i plugin utilizzano regolarmente i file JavaScript e CSS. Sfortunatamente, molte volte viene trascurato il bisogno di versioni di sviluppo e di produzione dei file.
Prendendo spunto da WordPress stesso, mirano ad assicurarmi di avere un commento completo e file minificati:
Accentsconagua
filename.jsfilename.min.jsfilename.cssfilename.min.cssPerché? Mi piace sapere cosa sta succedendo in quei file, ma mi piace anche sapere che ai miei visitatori vengono offerte versioni ottimizzate dei file.
Per fare ciò senza una qualche forma di task runner significherebbe cambiare gli URL di asset registrati in WordPress durante lo sviluppo per visualizzare la versione modificata e non minata, usando una qualche forma di compressore JavaScript e CSS prima di rilasciare un aggiornamento e quindi cambiare gli URL registrati indietro . E non è divertente.
Con Grunt, puoi usare il pacchetto Uglify per minimizzare e ottimizzare i file JavaScript al volo, e per prendere ulteriormente i CSS possiamo usare l'attività Sass per compilare al volo anche i file Sass in CSS. Per quello che vale, io uso Sass perché è quello che usa WordPress sotto il cofano, ma c'è anche un compilatore LESS per Grunt,.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', files: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / *. js '], dev: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', abbellisci: true, comprimi: false, mangle: false, files: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / in / another / file.js ',' assets / dynamic / paths / ** / *. js '] sass: dist: opzioni: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' compressed ', files: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' . min.css '], dev: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expanded ', files: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '] Suggerimento: se si utilizza l'operazione sass aggiungere .sass-cache alla tua .gitignore per impedire che la cache del compilatore venga aggiunta al tuo repository.
Abbiamo coperto due aree principali che Grunt può aiutare nello sviluppo di WordPress, ma facciamo un ulteriore passo avanti e troviamo la potenza aggiuntiva nell'utilizzo di un task runner.
Stiamo già fornendo attività per lavorare sui file, quindi perché non ottimizzarlo? Con l'attività sopra, avremmo bisogno di correre grugnito *** ogni volta che abbiamo apportato una modifica, perché non installare il pacchetto grunt-contrib-watch? Una volta configurato, istruirà Grunt a eseguire tali attività ogni volta che viene rilevato un cambio di file.
orologio da grugnito
Presto! Non più grunt in esecuzione su ogni modifica di file, basta avviare l'osservatore e modificare i file.
Non sarebbe bello eseguire JSHint sui nostri file JavaScript per rintracciare quei bug o mancare il punto e virgola? Basta installare l'attività grunt-contrib-jshint e l'attività di watcher prima che i file vengano compilati. Ora Grunt ti avviserà di eventuali errori e smetterà di eseguire ulteriori attività.
jshint: file: ['assets / js / filename.js', 'assets / dynamic / paths / ** / *. js'], opzioni: expr: true, globals: jQuery: true, console: true, module: true, document: true
Questo è stato particolarmente utile per me nello sviluppo del Fluent Framework. Il Fluent Framework è un insieme di classi che, tra le altre cose, creano pagine di opzioni e meta-box.
Per semplificare lo sviluppo di singoli campi, ho una struttura di file come questa:
beni / ├── js / | ├── nomefile.js ├── campi / ├── testo / | ├── js / | ├── text.js ├── seleziona / ├── js / ├── select.js
Questo rende molto facile trovare il campo su cui sto lavorando e modificare solo il codice JavaScript necessario per quel campo.
Dal punto di vista dell'utente, voglio solo servire un singolo file JavaScript con tutti i JavaScript comuni e basati sul campo combinati. Usiamo il compito grunt-contrib-uglify per realizzare questo.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', files: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / *. js '], dev: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', abbellisci: true, comprimi: false, mangle: false, files: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / in / another / file.js ',' assets / dynamic / paths / ** / *. js '] Con questa configurazione, dopo aver superato JSHint, unirà tutti i file JavaScript in un file di sviluppo e un file di produzione.
WordPress.org richiede a Readme.txt file che dettaglia le informazioni sul tema / plugin, ma preferiscono i sistemi di controllo della versione come GitHub e BitBucket Readme.md File. Non abbiamo bisogno di duplicare manualmente o mantenere questi file sincronizzati. Lascia che Grunt faccia questo per noi!
Installa l'attività grunt-contrib-copy e configurala in questo modo:
copia: dist: src: 'readme.txt', dest: 'README.md'
Un altro utile compito di Grunt è il pacchetto Grunt cURL. Uno dei Fluent Framework Fields aveva bisogno di accedere ai dati dell'API di Google Fonts. Caricamento di questo come Google consiglia di essere una richiesta HTTP ogni volta che viene caricata la pagina. In alternativa, se copi manualmente il contenuto del file, corri il rischio di non essere aggiornato. Il meglio dei due mondi è usare Grunt Curl per salvarci una richiesta e ottenere aggiornamenti.
Per essere sempre aggiornati, abbiamo semplicemente caricato l'attività cURL, gli abbiamo dato l'URL per recuperare i dati dei font e dove salvare la risposta.
curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google -fonts-source.json '
Ora, ogni volta che eseguiamo l'attività, l'ultimo elenco di caratteri viene scaricato e salvato nel file framework.
Questo compito è meglio utilizzato su temi, plugin e framework in cui un sacco di occhi sviluppatore saranno indiscreti. E il contesto non è mai una brutta cosa per coloro che cercano attorno al codice base.
PHP Documentor è un ottimo strumento per generare automaticamente quei dati. Ti aiuta anche a concentrarti sulla fornitura di DocBlocks significativi nel tuo codice.
phpdocumentor: dist: options: ignore: 'node_modules'
Suggerimento: Aggiungi docs alla tua .gitignore se non vuoi impegnare la documentazione e tutti i suoi file di cache.
Ecco il package.json e il Gruntfile.js per le attività sopra descritte.
package.json
"nome": "nome-pacchetto", "versione": "1.0.0", "descrizione": "...", "principale": "nomefile.php", "script": "test": "echo \ "Errore: nessun test specificato \" && exit 1 "," repository ": " tipo ":" git "," url ":" http://repo-url.com "," parole chiave ": [ "wordpress"], "author": "Your Name", "license": "GPL", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-copy": "~ 0.5. 0 "," grunt-contrib-jshint ":" ~ 0.8.0 "," grunt-contrib-sass ":" ^ 0.7.3 "," grunt-contrib-uglify ":" ~ 0.3.3 "," grunt " -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), copia: dist: src: 'readme.txt', dest: 'README.md' , curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google-fonts-source.json ', makepot: target: options: include: [' path / to / some / file.php '], digita:' wp-plugin '// o' wp -theme ', jshint: file: [' assets / js / filename.js ',' assets / dynamic / paths / ** / *. js '], opzioni: expr: true, globals: jQuery : true, console: true, module: true, document: true, phpdocumentor: dist: options: ignore: 'node_modules', sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' compressed ', files: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' . min.css '], dev: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', style:' expanded ', files: [expand: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '], uglify: dist: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', report:' gzip ', files: ' assets / js / filename.min.js ': [' assets / path / to / file.js ',' assets / path / to / another / file.js ',' assets / dynamic / paths / ** / *. js '], dev: opzioni: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', abbellisci: true, comprimi: false, mangle: false, files: ' assets / js / filename.js ': [' assets / path / to / file.js ',' assets / path / in / another / file.js ',' assets / dynamic / paths / ** / *. js ']); grunt.loadNpmTasks ( 'grunt-contrib-copy'); grunt.loadNpmTasks ( 'grunt-contrib-jshint'); grunt.loadNpmTasks ( 'grunt-contrib-sass'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-curl'); grunt.loadNpmTasks ( 'grunt-phpDocumentor'); grunt.loadNpmTasks ( 'grunt-wp-i18n'); grunt.registerTask ('default', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Suggerimento: Aggiungi node_modules e NPM-debug.log alla tua .gitignore per impedire che le attività come file associati vengano aggiunte al repository.
Come puoi vedere dalle attività precedenti, Grunt può essere utilizzato per automatizzare lo sviluppo di WordPress e darti più tempo per concentrarti sulla scrittura del codice, non sulla sua gestione.
Abbiamo dettagliatamente alcuni compiti per WordPress, ma ci sono molti altri pacchetti là fuori per esigenze specifiche del progetto, come attività di ottimizzazione dell'immagine e molto altro ancora, quindi vai ad esplorare!
Grunt è ora un task run ben collaudato e la documentazione è alla stessa stregua di WordPress, perché non prendere in considerazione un'attività che non è già stata pensata e condivisa con la comunità?
