Che cos'è Grunt? Grunt è un task runner. è un file Javascript che lancia i task che definiamo, uno dopo l'altro. Un esempio? La lista di attività ..

1. 27.05.2016, Federico Dario Ghirardi
GRUNT: come
iniziare

2. INDEX
▸ Installare Grunt ………………………………………. slide 3
▸ I compiti di uno sviluppatore front-
end……………………………………………………….. slide 5
▸ Concatenare i file ………….………………………... slide 7
▸ Minificare i file ………….…………………………….. slide 12
▸ Ottimizzare le immagini …………….…………….. slide 15
▸ Grunt watch e LIVEreload ………………………… slide 18
▸ Preprocessori ………………………………………….slide 22
GRUNT: come iniziare – Federico Dario Ghirardi
2/26

3. COME INSTALLARE
GRUNT
1.
3/26
GRUNT: come iniziare – Federico Dario Ghirardi

4. Come installare Grunt
Grunt e i suoi plugin sono installati e organizzati via npm, un package manager di Node.js.
Assicuratevi di averli installati sulla vostra macchina.
Per installare Grunt basterà scrivere nel terminale
npm install grunt@VERSION --save-dev
In seguito dovrete installare la Grunt's command line interface (CLI) tramite il comando
npm install -g grunt-cli
Ogni volta che grunt viene avviato da terminale, CLI cercherà il nostro Grunt installato in locale usando
require(), una funzione di Node.js. Grazie a questo, potete avviare grunt da ogni sottocartella del vostro
progetto.
4/26
GRUNT: come iniziare – Federico Dario Ghirardi

5. I COMPITI DI UNO
SVILUPPATORE
FRONT-END
2.
5/26
GRUNT: come iniziare – Federico Dario Ghirardi

6. ▸ Minificare e concatenare file Javascript e CSS
▸ Ottimizzare le immagini
▸ Usare preprocessori
Questi potremmo chiamarli tasks…
...e Grunt è un task runner.
Può fare tutte queste cose per te, eseguendo un semplice comando.
6/26
GRUNT: come iniziare – Federico Dario Ghirardi

7. CONCATENARE I FILE
3.
7/26
GRUNT: come iniziare – Federico Dario Ghirardi

8. CONCATENARE i file
Abbiamo 3 file separati
JQUERY.JS
CAROUSEL.JS
GLOBAL.JS
In produzione, vorremmo concatenare
questi file per migliorare le performance
(una richiesta è meglio di 3). Grunt può far
questo per noi.
Prima di tutto dobbiamo scaricare il plugin ufficiale di Grunt grunt-contrib-concat.
E' molto semplice, da terminale basterà scrivere:
npm install grunt-contrib-concat --save-dev
8/26
GRUNT: come iniziare – Federico Dario Ghirardi

9. CONCATENARE i file
Ora, tutto quello che dobbiamo fare è configurare Grunt e dirgli cosa vogliamo che faccia.
Per farlo, apriamo il file Gruntfile.js
9/26
GRUNT: come iniziare – Federico Dario Ghirardi

10. CONCATENARE i file
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// 1. La configurazione per concatenare i file va qui.
}
});
// 2. Dove diciamo a Grunt che vogliamo usare il plugin.
grunt.loadNpmTasks('grunt-contrib-concat');
// 3. Dove diciamo a Grunt cosa fare quando scriviamo “grunt” nel terminale.
grunt.registerTask('default', ['concat']);
};
10/26

11. CONCATENARE i file
Abbiamo 3 files JavaScript che vogliamo concatenare. Scriviamo il loro percorso in src e il percorso di
destinazione in dest. Il file di destinazione non esiste ancora, verrà creato una volta avviato il task.
concat: {
dist: {
src: [
'js/libs/*.js', // Tutti i file js nella cartella libs.
'js/global.js'
],
dest: 'js/build/production.js',
}
}
Una volta salvato il file Grunfile.js con le nostre modifiche, basterà scrivere grunt sul terminale, nel
percorso del nostro progetto.
11/26
GRUNT: come iniziare – Federico Dario Ghirardi

12. MINIFICARE I FILE4.
12/26
GRUNT: come iniziare – Federico Dario Ghirardi

13. MINIFICARE i file
Ora i 3 file JavaScript sono diventati un file unico. Minimizziamolo.
1 – Cerchiamo il plugin di Grunt che
ci serve
2 – Impariamo a configurare quel
plugin
3 – Scriviamo la configurazione
Il plugin ufficiale per minificare si chiama grunt-contrib-uglify.
Come prima, da terminale basterà scrivere:
npm install grunt-contrib-uglify --save-dev
13/26
GRUNT: come iniziare – Federico Dario Ghirardi

14. MINIFICARE i file
Aggiungiamo questa riga nel file Gruntfile.js per caricare il plugin:
grunt.loadNpmTasks('grunt-contrib-uglify');
Poi lo configuriamo:
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
}
Infine aggiorniamo il task di default:
grunt.registerTask('default', ['concat', 'uglify']);
Scrivi grunt nel terminale come prima e otterrai il JavaScript minificato.
14/26

15. OTTIMIZZARE LE
IMMAGINI
5.
15/26
GRUNT: come iniziare – Federico Dario Ghirardi

16. OTTIMIZZARE le immagini
Il plugin ufficiale da scaricare in questo caso è grunt-contrib-imagemin:
npm install grunt-contrib-imagemin –save-dev
Registriamolo nel file Gruntfile.js:
grunt.loadNpmTasks('grunt-contrib-imagemin');
Configuriamolo:
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build/'
}]
}
}
16/26
GRUNT: come iniziare – Federico Dario Ghirardi

17. OTTIMIZZARE le immagini
Infine inseriamolo in registerTask come abbiamo fatto con gli altri due plugin:
grunt.registerTask('default', ['concat', 'uglify', 'imagemin']);
Scriviamo grunt nel terminale e l'ottimizzazione sarà completata
17/26
GRUNT: come iniziare – Federico Dario Ghirardi

18. GRUNT watch e
LIVEreload
6.
18/26
GRUNT: come iniziare – Federico Dario Ghirardi

19. GRUNT watch e LIVEreload
Quello che abbiamo fatto finora è incredibilmente utile, ma ci sono ancora un paio di task
che facilitano ulteriormente il nostro compito.
Sarebbe bello poter eseguire tutti questi
task (minificare, concatenare,
ottimizzare immagini)
automaticamente...e con grande
sorpresa si può fare!
Nel nostro caso:
1 - Concatenare e minificare JavaScript
quando apportiamo delle modifiche.
2- Ottimizzare le immagini quando una
nuova immagine viene aggiunta.
19/26
GRUNT: come iniziare – Federico Dario Ghirardi

20. GRUNT watch e LIVEreload
Possiamo far ciò “guardando” i file. Possiamo dire a Grunt di tenere d'occhio cambiamenti in parti
specifiche del nostro progetto e, quando succede qualcosa, di svolgere determinati tasks.
Anche qui ci viene incontro il plugin ufficiale, grunt-contrib-watch.
Nel file Gruntfile.js andremo ad aggiungere:
watch: {
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
}
}
20/26
GRUNT: come iniziare – Federico Dario Ghirardi

21. GRUNT watch e LIVEreload
Livereload, invece, permette di evitare la solita trafila “cambia css – aggiorna la pagina” perché non ci
sarà bisogno di aggiornare la pagina del browser, evento che avviene automaticamente una volta
effettuato un cambiamento. Inoltre nel caso specifico di un cambiamento nel CSS, la pagina non si
refresha ma semplicemente vengono aggiunti gli stili nuovi.
Questa volta non c'è un plugin ufficiale, ma vi basterà scrivere Livereload Grunt sul web per trovarlo.
Una volta installato nel solito file Gruntfile.js scriverete questo:
. watch: {
options: {
livereload: true,
},
scripts: {
/* etc */
21/26
GRUNT: come iniziare – Federico Dario Ghirardi

22. PREPROCESSORI7.
22/26
GRUNT: come iniziare – Federico Dario Ghirardi

23. PREprocessori
Scaricando il plugin grunt-contrib-sass e avendo Sass installato nella nostra macchina, potremo far
fare a Grunt anche questo task.
Sass si minifica da solo, quindi con questo codice compiliamo il nostro global.scss:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/global.css': 'css/global.scss'
}
}
}
23/26
GRUNT: come iniziare – Federico Dario Ghirardi

24. PREprocessori
Non vogliamo però avviare manualmente questo task, quindi utilizzeremo ancora il plugin watch.
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
Ora, ogni volta che effettueremo un cambiamento nei file Sass, il CSS verrà automaticamente
aggiornato.
24/26
GRUNT: come iniziare – Federico Dario Ghirardi

25. BIBLIOGRAFIA & CREDITS
▸ Grunt for People Who Think Things Like Grunt are Weird and
Hard - https://24ways.org/2013/grunt-is-not-weird-and-hard/
▸ Grunt: un tool per l'ottimizzazione dei progetti Javascript -
http://www.mrwebmaster.it/javascript/grunt-ottimizzazione-
javascript_12108.html
▸ Concat & Watch: La leggerezza di utilizzare Grunt come Task
Runner - http://danilodelfio.com/2016/01/13/build-watch-check-
error-la-leggerezza-di-utilizzare-grunt-come-task-runner/
25/26
GRUNT: come iniziare – Federico Dario Ghirardi

26. GRAZIE per l’attenzione!
Dubbi o domande?
Il mio contatto diretto:
federico.ghirardi@openstyle.it
26/26
GRUNT: come iniziare – Federico Dario Ghirardi

27. SlidesCarnival icons are editable shapes.
This means that you can:
● Resize them without losing quality.
● Change line color, width and style.
Isn’t that nice? :)
Examples: