gulp image

Visual Studio Code, Typescript, Sass e Gulp

Il titolo di questo post riassume in maniera precisa l’ultima settima di lavoro.

Dovendo implementare una serie di single-page application con un struttura comune, ho cercato di automatizzare il più possibile le operazioni ricorrenti. In particolar modo le operazione di build, in modo da velocizzare le fasi di deploy e di creazione del pacchetto di distribuzione.

Struttura del progetto

Visual Studio Code, da un pò di tempo, è il mio editor preferito per questo tipo di attività, anche se il fratello maggiore Visual Studio rimane comunque il mio strumento principale per il deploy di applicazioni con maggiore complessità.

Dovendo scrivere alcune funzionalità in javascript la scelta è stata Typescript, che ritengo indispensabile per poter sviluppare codice javascript senza ricadere sui problemi di complessità, tipo di variabile e null reference. Typescript consente di scrivere le proprie funzioni utiilzzando il concetto di classe, interfaccia e soprattutto tipizzando le variabili. Il codice viene scritto in javascript e successivamente passato ad un comando specifico che ne consente la generazione nel javascript finale. Il compilatore utilizza il file di configurazione tsconfig.json all’interno del quale è possibile impostare la versione finale del codice javascript, in base al tipo di browser target e dal loro livello di complessità ai vari standard.  

Altro elemento fondamentale per lo sviluppo di single page application sono i fogli di stile: lo sviluppo di regole più o meno complesse spesso può generare complessità nella lettura e soprattuto nella scrittura del file finale. 

Per evitare questo tipo di problemi, la scelta è ricaduta su Sass . Sass è precompilatore, consente in pratica di generare file css a partire da un file composto da variabili, annidamenti e soprattutto l’ereditarietà. Il risultato è un foglio di stile semplice e soprattutto leggibile. 

Operazioni ripetive…

A questo punto risulta chiaro che almeno due operazioni sono ripetitive: 

  • la compilazione del file Typescript
  • la compilazione del file SASS

Aggiungiamo un ulteriore elemento alla flusso: la generazione di bundle e sopratutto la creazione di file .min. Anche questo passaggio dovrà essere automatizzato. 

E’ ormai noto che gli sviluppatori sono pigri, soprattutto quando devono eseguire operazioni continuativi e soprattutto ripetitive. Bene, questo è uno di quei casi. Nel mio caso mi sono affidato a Gulp  un task runner che consente di ottimizzare numerose operazioni attraverso la scrittura di script personalizzati. Gli script sfruttano il concetto di pipe (concetto noto per i programmatori di node.js) ed utilizzano una serie di moduli già pronti per realizzare le operazioni principali, come ad esempio il minify o il bundle di script js.  Inoltre, gulp ha una funzionalità, denominata watch, che consente di automatizzare le operazioni dello script al momento del salvataggio dei singoli file monitorati. 

Come per node.js possono essere scaricati nuovi componenti / moduli utilizzando il package manager npm

Le single page application utilizzeranno la pagina index.html come destinazione del codice.

Riassumento i passaggi legati allo sviluppo delle single application da realizzare, le funzionalità che dovranno essere automatizzate saranno: 

  • compilazione dei file typescript con la generazione degli equivalenti file javascript
  • compilazione dei file sass generando gli equivalenti file css
  • nel caso di compilazione per l’ambiente di produzione, la generazione dei file javascript e css nel formato minify. In questo caso dovrà essere automatizzata la modifica dei riferimenti all’interno del file index.html (da *.js a *.min.js, da *.css a *.min.css e viceversa)

Per poter effettuare lo switch del tipo di compilazione lo script prevederà un parametro (da aggiungere al momento dell’esecuzione) in modo da specificare se ci troviamo in una compilazione env (con le operazioni minify) oppure dev (quindi senza le operazioni minify).

All’interno del file gulpfile.js sono definiti una serie di task che possono essere eseguiti singolarmente o sequenzialmente raggruppandoli sotto un unico task. 

Script disponibile su github

Lo script e le relative istruzioni su come poterlo utilizzare sono disponibili al mio repository github

Pubblicato da

Andrea Merlin

Laureato in informatica, diversi corsi di specializzazione legati allo Sviluppo Software e alla Computer forensics. Appassionato di nuove tecnologie, amo la programmazione, la Business Intelligence e tematiche legate alla Privacy.Sempre alla ricerca di nuove idee, stimoli … e progetti da seguire!Amo trascorrere il tempo libero in Val Borbera, un piccolo angolo del Piemonte, in provincia di Alessandria.