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