Uno script Gulp per automatizzare la compilazione dei files Sass (scss)

Gulpjs

Gulp js è una libreria javascript che permette di automatizzare svariate tipologie di noiose procedure che gli sviluppatori normalmente fanno “a mano”.

Proprio in questa direzione ho deciso di scrivere un breve script gulp che consente di automatizzare la ricompilazione dei fogli di stile SASS (scss), per evitarmi di lanciare, ad ogni modifica dei files, il comando sass sorgente.scss destinazione.css.

L’unico prerequisito per utilizzare gulp è di aver installato Nodejs ed il suo package manager npm (che viene installato di default insieme a node). Una volta installato node e scaricati i sorgenti del mio script basterà lanciare:

sudo npm install

…ed npm installerà per voi tutte le dipendenze necessarie!

Lo script prevede due modalità di esecuzione tramite i seguenti comandi:

  • gulp: compila i vostri scss presenti nella sottocartella src in un unico css nella root directory minifizzato (sass –style compressed)
  • gulp dev: compila gli scss in modalità espansa (sass –style expanded)

Questi due comandi avviano un task che rimane “in ascolto” e ad ogni modifica di un file scss rilancia il comando evitando il noioso compito di lanciare ogni volta la compilazione dei files per vedere le modifiche allo stile delle vostre web app/siti. In questo modo potrete scrivere le direttive di stile come si faceva prima dell’avvento di SASS/LESS e vedere immediatamente le nuove modifiche “live”.

Ho previsto un repository github “gulp-for-sass” con questo mini-progetto, scaricabile e modificabile liberamente!

Ng-Cookies e cookies su localhost con AngularJs

AngularJS-largeOggi scrivo di una piccola scoperta fatta giocando con AngularJs e i cookies che potrebbe tornare utile a chi di voi si deve cimentare nell’utilizzo di questa funzionalità javascript con l’ormai noto framework.

Facendo dei test di scrittura/lettura di informazioni all’interno dei cookies sembrava che non fosse consentito utilizzarli da localhost, ossia in locale. Più precisamente il cookie settato in una pagina, spariva letteralmente passando in un’altra pagina (cambiando url).

Dopo aver perso tutte le speranze e mentre vagavo senza meta all’interno delle issues del repository Github di AngularJs mi si è aperto un modo: un utente che si era interessato al problema dei cookies diceva che dopo averne discusso con il team di sviluppo aveva scoperto che per far funzionare a dovere questa funzionalità era necessario impostare il tag html base.

Facciamo un esempio: se il vostro progetto risponde all’url http://localhost/tests/angularjs/cookies sarà necessario impostare il base tag nel seguente modo:

 <base href="http://localhost/tests/angularjs/cookies/"> 

In questo modo i cookies verranno salvati per tutte le url che inizieranno per l’indirizzo specificato nel tag.

Il particolare importante da notare è lo slash finale. Senza quello nulla funzionerà.