http://gulpjs.com

Tl; dr: alla fine di questo tutorial avremo un flusso di lavoro che ottimizzerà css, javascript ed imposterà un server locale con Browsersync.


Requisiti: cosa ti serve per iniziare?

Quello che ci serve è una macchina con node, npm e Gulp installati.

Segui questo tutorial per installare node e npm: http://blog.nodeknockout.com/post/65463770933/how-to-install-nodejs-and-npm

Installiamo Gulp globalmente con questo comando:

npm install --global gulp

Se l’installazione di node, npm e gulp è andata a buon fine, puoi continuare con la lettura di questo tutorial.


Fase 0: download del progetto

Prima di tutto, apriamo il terminale e cloniamo il progetto:

git clone git@github.com:trevisojs/how-to-gulp.git

oppure scarichiamo lo zip cliccando qua.

trevisojs/how-to-gulp
how-to-gulp - Gulp Starter Kit with Browsersync
Treviso JS è un gruppo dedicato a Javascript per sviluppatori e non che abitano nella zona di Treviso. github.com

Nel progetto troveremo una cartella _assets ed una cartella web, nella prima ci saranno i sorgenti dei file che poi verranno compilati; nella seconda ci sarà il sito vero e proprio con i file di produzione e le pagine html.

Per far funzionare Gulp, andremo a modificare il gulpfile.js che inizialmente avrà solo questa riga di javascript.


Fase 1: installiamo le dipendenze con npm

La prima cosa che vogliamo fare è compilare i file scss che trovi in _assets/scss e minificarli.

Da terminale, nella cartella how-to-gulp, installiamo i moduli gulp-sass e gulp-cssmin con npm e aggiorniamo il nostro package.json automaticamente con il flag save-dev. Ricordiamo inoltre di installare Gulp localmente nella cartella di progetto.

npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev gulp-cssmin

Ora non ci resta che creare il nostro primo task Gulp.


Fase 2: il nostro primo task

Inseriamo le dipendenze che abbiamo scaricato poco fa con npm e scriviamo il nostro primo task che avrà il compito di gestire i file scss.

Con gulp.src prendiamo tutti i file nel percorso indicato e con estensione .scss per poi compilarli con sass(), minificarli con cssmin() ed infine inserirli nella cartella di produzione web/css.

Apriamo il terminale ed entriamo nella cartella di progetto così possiamo lanciare il comando

gulp styles

In web/css troveremo il file css generato.


Fase 3: il nostro secondo task

Ora tocca ai file JS.

Installiamo con npm i moduli gulp-concat e gulp-uglify e creiamo il task scripts ricordandoci di aggiungere le dipendenze ad inizio file.

npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify

Passiamo a gulp.src i file da elaborare nel task, in questo caso tutti i file js nella cartella _assets/js e relative sottocartelle (_assets/js/**/*.js).

Il task in questione si occuperà di:

  1. concatenare i file in uno unico di nome scripts.js;
  2. minimizzare scripts.js con uglify;
  3. inserire il risultato in nella cartella web/js.

Fase 4: il nostro server locale

Creiamo il task con browsersync per creare un server locale e per fare in modo che se si modificano i vari file .scss, .js, .html il browser si aggiorni da solo.

Installiamo la dipendenza sempre con npm e creiamo il task serve.

npm install --save-dev browser-sync

Questo task permette la creazione di un server locale, solitamente http://localhost:3000, puntato su una cartella a scelta, in questo caso la nostra cartella web.

Gulp.watch() serve per eseguire dei task quando i file vengono modificati.

Come ultima cosa, per far aggiornare il browser in automatico al salvataggio di un file, aggiungiamo in coda ai task styles e scripts questa funzione di brosersync:

.pipe(browserSync.stream());

Finale

Ora abbiamo uno starter kit per progetti semplici e statici che permette un livello di automatizzazione maggiore nel nostro flusso di lavoro.


Pensieri sparsi e link

Nb: questo è il primo tutorial che scrivo ed ho voluto farlo come se stessimo parlando faccia a faccia.

Like what you read? Give Nicholas Ruggeri a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.