Nel lavoro quotidiano di uno sviluppatore capita spesso di dover eseguire azioni ripetitive e noiose. Per fortuna esistono strumenti come Grunt che consentono di automatizzare tali operazioni permettendo al programmatore di concentrarsi sugli aspetti importanti del proprio lavoro. Grunt è un task runner molto versatile grazie alla sua struttura a plugin ed è ampiamente diffuso nell’ambito dello sviluppo di plugin e temi per WordPress.

1. Marco Chiesi
Grunt:
Automazione
per sviluppatori
"Pigri"

2. Ciao!
Ing. Informatico @ Black Studio
Web dal 1998 - WordPress Lover dal 2010
Sviluppatore di plugin, Core Contributor,
Organizzatore WP Meetup Teramo,
Speaker, PTE Globale Polyglots
Marco Chiesi
@marcochiesi
www.blackstudio.it

3. GLI SVILUPPATORI
SONO PIGRI!

4. I choose a lazy person
to do a hard job.
Because a lazy person
will find an easy way
to do it.
- Bill Gates
Fondatore di Microsoft

5. The three great virtues
of a programmer:
laziness, impatience,
and hubris.
- Larry Wall
Creatore del linguaggio PERL

6. La soluzione per
la pigrizia è...
L'AUTOMAzione

7. TASK
I task runner sono strumenti che
permettono di automatizzare
attività ripetitive (e spesso
noiose) con il minimo sforzo

8. Utilizzi tipici dei task runner
× Minificazione/concatenazione CSS/JS
× Compilazione SASS/LESS
× Test automatizzati
× Linting del codice
× Elaborazione di Codice/Testo
× Ottimizzazione immagini
× ....

9. Task Runner più diffusi

10. Cos'è GRUNT?
× Grunt è un task runner
× Scritto in JavaScript
× Modulo di Node.js
× Linea di comando
× Configurabile in base
al progetto
https://gruntjs.com

11. Perché usare Grunt?
× Automazione di task ripetitivi
× Open source
× Community estesa
× Migliaia di plugin disponibili
× Facile da installare e usare
× Possilità di realizzare plugin custom

12. Chi usa Grunt?
WP Core ...e molti altri!

13. Requisiti per utilizzare Grunt
Requisiti software:
× Node.js
× npm (node package manager)
Requisiti sviluppatore:
× Conoscenza di base JavaScript
× Familiarità con la linea di comando

14. Come iniziare
1. Scaricare e installare Node.js da
https://nodejs.org
2. Assicurarsi che npm sia aggiornato:
npm update -g npm
3. Installare globalmente Grunt CLI:
npm install -g grunt-cli

15. File e cartelle di Grunt
package.json
⇒ File che specifica le dipendenze
Gruntfile.js
⇒ File con le definizioni dei task
node_modules
⇒ Cartella con i moduli node.js
Da includere
nel versioning
Da escludere
dal versioning

16. Operare su un progetto Grunt esistente
1. Andare alla cartella principale del
progetto
cd <folder>
2. Installare le dipendenze del progetto:
npm install
3. Eseguire Grunt:
grunt oppure grunt <task>

17. Predisporre un nuovo progetto Grunt
1. Aprire cartella progetto: cd <folder>
2. Inizializzare package.json: npm init
3. Creare Gruntfile.js vuoto
4. Installazione Grunt e plugin da usare:
npm install grunt --save-dev
npm install <plugin> --save-dev
5. Editare Gruntfile.js
6. Eseguire Grunt: grunt o grunt <task>

18. 6.485plugin disponibili su
https://gruntjs.com/plugins
Quelli con prefisso "contrib" sono
mantenuti ufficialmente da Grunt

19. Esempio di package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.5.0"
}
}

20. Esempio di Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
...
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Configurazione task
Caricamento moduli
Registrazione task

21. Plugin per il caricamento automatico
load-grunt-tasks: permette di caricare i
task senza doverli specificare.
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-cssmin');
grunt.loadNpmTasks('grunt-potomo');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-phpcs');
grunt.loadNpmTasks('grunt-eslint');
...
...
require('load-grunt-tasks')(grunt);

22. Combinazione di più task
grunt.registerTask( 'check', [
'phpcs',
'jshint',
'eslint',
'stylelint',
'checktextdomain',
'checkwpversion'
]);
Con registerTask è possibile combinare
più task in un solo comando.

23. Plugin per gestire file/cartelle
grunt-contrib-copy
× Copia di file e cartelle
grunt-contrib-clean
× Cancellazione/ripulitura file e cartelle
grunt-contrib-compress
× Creazione file compressi (zip, tar.gz, etc)
grunt-lineending
× Conversione caratteri di fine linea

24. Plugin per CSS, JavaScript e immagini
CSS
× Minificazione/concatenazione: grunt-contrib-cssmin
× Linting: stylelint + grunt-stylelint
JavaScript
× Minificazione/concatenazione: grunt-contrib-uglify
× Linting: grunt-contrib-jshint oppure
eslint + grunt-eslint
Immagini (JPG, PNG, GIF, SVG)
× Ottimizzazione : grunt-contrib-imagemin

25. Plugin Watch
Il plugin grunt-contrib-watch permette di eseguire
automaticamente dei task quando i file specificati
vengono aggiunti, modificati o cancellati.
grunt.initConfig({
watch: {
files: ['**/*.js'],
tasks: ['jshint'],
},
});

26. Plugin Watch + Live Reload
Il plugin grunt-contrib-watch supporta anche il
ricaricamento automatico del browser.
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},

27. Plugin per Browsersync
Il plugin grunt-browser-sync permette la
navigazione sincronizzata su più browser/device.
browserSync: {
dev: {
bsFiles: {
src : 'assets/css/style.css'
},
options: {
watchTask: true,
proxy: "test.local"
}
}
}

28. Plugin per Task interattivi
Il plugin grunt-prompt permette di
creare dei task interattivi.

29. Plugin per Internazionalizzazione
grunt-wp-i18n
× Genera i file POT a partire dai sorgenti
× Aggiunge il textdomain se manca
grunt-potomo
× Compila i file .po nei binari .mo

30. Plugin per WordPress coding standards
PHP
grunt-phpcs (+ PHP_CodeSniffer + WPCS rules)
CSS
stylelint-config-wordpress
(+ stylelint + grunt-stylelint)
JavaScript
eslint-config-wordpress (+ eslint + grunt-eslint)

31. Altri plugin specifici per WordPress
grunt-wp-readme-to-markdown
× Converte il readme.txt del plugin in formato
Markdown (utile per GitHub)
grunt-checkwpversion
× Verifica la consistenza del numero di versione
nei diversi punti del progetto
grunt-wp-deploy
× Deploy da Git al repo SVN di wordpress.org

32. Wrapper per WP-CLI
Con il plugin grunt-wp-cli unitamente al
wrapper wp-cli è possibile utilizzare
WP-CLI in combinazione con Grunt.

33. Grazie!
Domande?
@marcochiesi
marco@blackstudio.it
Slide disponibili su:
blackstudio.it/talks/

34. Credits
× Template presentazione: SlidesCarnival
× Immagini:
× "Wild Boar" di Dmitry Abramov (Pixabay)
× "Cat Sleeping" di wallpaperspoints
(Chainimage)
× "Bill Gates" di DFID - UK (Wikipedia)
× "Larry Wall" di Randal Schwartz (Wikipedia)
× "Beep Beep" di Innc (kisspng.com)