Javascript task automation
-
Upload
antonio-liccardi -
Category
Software
-
view
105 -
download
0
Transcript of Javascript task automation
Template designed by
Javascript Task Automation
Antonio Turibbio Liccardi@turibbiohttp://codingbad.net
Full-stack developer @ blexin
Co-founder di DotNetCampania
Contributor su GetLatestVersion.it
chi sono
Perché automatizzare?
I framework Javascript per automatizzare
Tutto su Gulp!
agenda
Perché automatizzare?
Modern Times – Charlie Chaplin (1936)
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?
Possiamo guadagnare tempo automatizzando task ripetitivi?
Usiamo un task runner!
Task runners
Grunt vs Gulp
Grunt
• Configuration over code (json)
• File based• >4000 plugins
Gulp
• Code over configuration
• Stream based• >2000 plugins
Grunt
Gulp
Primi passi con Gulp.js
src
dest
watch
task
Gulp Cheatsheet
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
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
dem
o Hello World
Code analysis
CSS Compilation
HTML Injection
Dev Server
Build
Testing
Cosa possiamo fare realmente?
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
dem
o Code Analysis
Con Gulp possiamo automatizzare la compilazione di css usando Less o Sass, possiamo minificare, offuscare, concatenare
CSS manipulation
dem
o CSS Compilation
Iniezione di HTML
HTML Injection
Iniezione degli script tramite
Bower
HTML Injection
dem
o HTML Injection
Tramite l’uso di nodemon
possiamo, a seguito di una
modifica a determinati files,
fare il restart del server node
Auto-Update Dev Server
dem
o Auto-Update Dev
Server
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
dem
o Build
Con Gulp è possibile
automatizzare il testing del
nostro codice javascript
Faremo uso di karma
Testing
dem
o Testing
Perché automatizzare?
Gulp e Grunt
Come automatizzare
Riepilogo
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