Grunt come iniziare

27.05.2016, Federico Dario Ghirardi

GRUNT: come iniziare

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

COME INSTALLARE GRUNT

1.3/26GRUNT: come iniziare – Federico Dario Ghirardi

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/26GRUNT: come iniziare – Federico Dario Ghirardi

I COMPITI DI UNO SVILUPPATORE FRONT-END


▸ 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.


CONCATENARE I FILE


CONCATENARE i fileAbbiamo 3 file separati

JQUERY.JSCAROUSEL.JSGLOBAL.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


CONCATENARE i file

Ora, tutto quello che dobbiamo fare è configurare Grunt e dirgli cosa vogliamo che faccia.Per farlo, apriamo il file Gruntfile.js


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

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.


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

MINIFICARE i fileOra i 3 file JavaScript sono diventati un file unico. Minimizziamolo.

1 – Cerchiamo il plugin di Grunt che ci serve2 – Impariamo a configurare quel plugin3 – 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


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

OTTIMIZZARE LE IMMAGINI


OTTIMIZZARE le immaginiIl 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/' }] }}


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


GRUNT watch e LIVEreload


GRUNT watch e LIVEreloadQuello 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.



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, }, } }



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 */


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

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' } } }


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.


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/


GRAZIE per l’attenzione!

Dubbi o domande?Il mio contatto diretto: [email protected]


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:

Grunt come iniziare

Software

Transcript of Grunt come iniziare