1. Template designed by
Javascript Task Automation
Antonio Turibbio Liccardi
@turibbio
http://codingbad.net

2. Full-stack developer @ blexin
Co-founder di DotNetCampania
Contributor su GetLatestVersion.it
chi sono

3. Perché automatizzare?
I framework Javascript per automatizzare
Tutto su Gulp!
agenda

4. Perché automatizzare?
Modern Times – Charlie Chaplin (1936)

5. Dev
• Project setup
• Css Manipulation (Sass/Less)
• JS Lint
• Live Reload
• Watch for changed files
• Code Analysis
Release
• Compile
• Unit Testing
• Integration Testing
• Concatenation, Minification,
Vendoring
• Image minification
• Deployment
Cosa automatizzare?

6. Possiamo guadagnare tempo
automatizzando task ripetitivi?

7. Usiamo un task runner!

8. Task runners

9. Grunt vs Gulp
Grunt
• Configuration over code
(json)
• File based
• >4000 plugins
Gulp
• Code over configuration
• Stream based
• >2000 plugins

10. Grunt

11. Gulp

12. Primi passi con Gulp.js
src
dest
watch
task

13. Gulp Cheatsheet

14. gulp.task()
Consente di definire un task tramite l’uso di una funzione. Si
possono dichiarare anche delle dipendenze, che vengono
eseguite prima dell’esecuzione del task in parallelo
gulp.src()
Consente di specificare i file di input per l’intera stream pipeline
Gulp API

15. gulp.dest()
Consente di specificare l’output dello stream
gulp.watch()
Consente di osservare dei file e di lanciare un task alla loro
modifica
Gulp API

16. demo
Hello World

17. Code analysis
CSS Compilation
HTML Injection
Dev Server
Build
Testing
Cosa possiamo fare realmente?

18. JSHINT
identifica errori e potenziali problemi
JSCS
Javascript code style checker
Entrambi richiedono un set di regole in JSON (.jshintrc, jscsrc, sono
riconosciuti dagli editor)
Code Analysis

19. demo
Code Analysis

20. Con Gulp possiamo automatizzare la compilazione di css
usando Less o Sass, possiamo minificare, offuscare, concatenare
CSS manipulation

21. demo
CSS Compilation

22. Iniezione di HTML
HTML Injection

23. Iniezione degli script tramite
Bower
HTML Injection

24. demo
HTML Injection

25. Tramite l’uso di nodemon
possiamo, a seguito di una
modifica a determinati files,
fare il restart del server node
Auto-Update Dev Server

26. demo
Auto-Update Dev Server

27. Con l’uso di Gulp possiamo automatizzare il processo di
preparazione del pacchetto per la nostra build.
Per questo scopo facciamo
uso di useref
Build

28. demo
Build

29. Con Gulp è possibile
automatizzare il testing del
nostro codice javascript
Faremo uso di karma
Testing

30. demo
Testing

31. Perché automatizzare?
Gulp e Grunt
Come automatizzare
Riepilogo

32. Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
codingbad.net
@turibbio
Grazie