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 gulpSe 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.gitoppure scarichiamo lo zip cliccando qua.
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-cssminOra 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:
- concatenare i file in uno unico di nome scripts.js;
- minimizzare scripts.js con uglify;
- 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.
- facebook trevisojs, github trevisojs
- github personale: progetti personali e opensource
