Grunt come iniziare

50 %
50 %
Information about Grunt come iniziare

Published on June 16, 2016

Author: openstyle

Source: slideshare.net

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:

Add a comment