Aggiornare automaticamente il browser con Gulp

Quando si sviluppa un sito web ci si trova di fronte a molte difficoltà, una delle quali è effettuare dei test su più browser. Grazie al nostro amico Gulp sarà possibile effettuare questi test senza dover ricaricare ogni singolo browser.

Il vantaggio principale di utilizzare browser-sync e l’aggiornamento in tempo reale senza dover ricaricare la pagina ad ogni modifica, permettendoci quindi di effettuare dei test cross browser (ideali se abbiamo più schermi).

Un altro vantaggio sta nel poter vedere e controllare i dispositivi connessi, oltre a poter fornire un IP esterno per vedere il lavoro.

Installiamo browser-sync

Browser-sync non necessita di una versione speciale per gulp. Ci basterà semplicemente installarlo così:

Creiamo il file gulp

Anche il file gulpfile.js è molto semplice, il codice è il seguente:

Oltre a caricare gulp e browser-sync  creeremo un tastk chiamato “serve” che ci permetterà di aggiornare automaticamente ad ogni modifica dei file css e html dentro la cartella “test”.

Ricordiamoci di scrivere un file html valido, quindi con un richiamo al file js e css nel modo corretto, come ad esempio:

Avviamo il tutto con

Se tutto è andato nel verso giusto si aprirà una nuova pagina sul nostro browser e vedremo il messaggio “Connected to BrowserSync”, proviamo ad aggiornare un file per vedere le modifiche in tempo reale.

Accedendo a localhost:3001 potremo vedere tutti i device connessi e l’IP esterno per raggiungerci.

Creare sprite CSS con Gulp

In questa guida andremo a vedere come creare delle sprite css con gulp. Cioè andremo a creare un’unico file contenente tutte le immagini e il relativo file css per recuperarle rapidamente. Il tutto con pochissime righe di codice.

Preparare le immagini

Creiamo una cartella denominata “img” dove all’interno inseriremo tutte le nostre immagini che verranno incluse nello sprite.

Quando inseriamo le immagini dobbiamo avere l’accortezza di:

  • dare un nome unico e sensato. Il file css che verrà creato userà il nome delle immagini, quindi più semplice ed intuitivo è più sarà facile per noi recuperarle
  • inseriamole delle dimensioni corrette, eviteremo uno spreco di spazio inutile e sarà più facile e immediato recuperarle ed usarle
  • carichiamole in formato png o con lo sfondo corretto (se le carichiamo con il formato png con sfondo trasparente sarà più facile utilizzarle su sfondi diversi)

Usiamo Gulp e creiamo lo sprite css

Se questo è il tuo primo incontro con Gulp ti consiglio di leggere la relativa guida “Primi passi con Gulp” per iniziare.

Una volta preparate le nostre immagini proseguiamo installando “spritesmith” e “gulp”, scrivendo nella relativa cartella dalla shell le seguente righe di codice.

Creiamo, sempre nella root del nostro progetto, il gile gulpfile.js con questo contenuto

Oltre a caricare gulp e spritesmith creeremo un task “sprite” che recupererà tutte le immagini png dentro la cartella “img” e creerà un file denominato “sprite.png”, contenente lo sprite di tutte le immagini e “sprite.css” contenente tutti i css necessari, inserendoli nella cartella output.

Avviamo quindi il nostro tastk scrivendo da shell:

Nella cartella output verranno creati i due file. Ci basterà includere il file css e usare le relative classi per mostrare le immagini correttamente.

 

Il Css generato sarà come il seguente

Troviamo tutta la documentazione su github nel sito del progetto.

Primi passi con Gulp

Introduzione

Gulp è un tool che viene utilizzato per migliorare lo sviluppo di un sito web. In particolare può essere utile in questi casi:

  • Velocizzare un server e il sito web stesso
  • Usare un preprocessore come “Sass”o “Less”
  • Ottimizzare (e minimizzare) CSS, JavaScript e immagini

Gulp può fare molte altre cose e può essere impiegato in progetti semplici o molto complessi.

Cosa andremo a fare

In questa guida impareremo come:

  • Installare Gulp
  • Compilare un file Sass o Less
  • Ottimizzare i file CSS, js e le immagini

Installare Gulp

La prima cosa da fare è installare node.js. Questo passaggio è veramente molto semplice ed immediato. Ci basterà infatti scaricare il pacchetto di installazione per windows o seguire le istruzioni che troviamo nel sito nodejs.org.

Una volta installato node.js possiamo procedere all’installazione di Gulp con il comando che segue

Creare un progetto con Gulp

Spostiamoci (da shell) nella directory dove dobbiamo creare il nostro sito web e creiamo il nostro progetto scrivendo, sempre da shell:

Proseguiamo inserendo tutte le informazioni necessarie (puoi semplicemente premere invio se non sai cosa mettere) Verrà creato un file .json contenente tutte le informazioni necessarie.

Adesso che abbiamo creato il nostro file package.json possiamo installare gulp su questo progetto con il comando

Impostiamo il progetto

L’ultimo passaggio prima di iniziare ad usare Gulp sul serio è creare il nostro progetto. Possiamo creare una struttura del genere:

Dove dev sarà la cartella di sviluppo e dist sarà il posto dove si troveranno i file compilati e che useremo.

Creiamo il file gulp

Adesso che abbiamo impostato il nostro progetto possiamo aggiungere qualche utility che ci permetterà di fare quanto descritto in precedenza, sempre da shell scriviamo:

in particolare – andando in ordine – andremo ad installare:

  1. compila sass
  2. imagemin, ottimizza le immagini
  3. uglify, comprime i file js
  4. concat, unisce i file css e js
  5. strip-debug, elimina i console log, gli alert e tutto il codice “extra”
  6. csso, comprime i file css

Compiliamo un file Sass con Gulp

Abbiamo completato il nostro ambiente, è quindi arrivato il momento di fare il primo passo, compilare un file sass.

Creiamo quindi nella cartella “dev/scss” un file denominato “style.scss” con questo contenuto

e nel nostro file html che sarà sotto “dev” andiamo ad inserire il foglio di stile compilato e la classe (per poterne vedere le modifiche)

Infine apriamo il nostro file gulpfile.js ed inseriamo il seguente contenuto:

Nel particolare:

  • andiamo a caricare gulp e il tool per compilare sass
  • aggiungiamo 2 task, il primo si occuperà di prendere il file tutti i  file “.scss” dentro la cartella dev/scss (e sottocartelle), di compilarli e di salvare l’output dentro la cartella dev/css
  • il secondo task si occupa di controllare (watch) le modifiche ai file sass, html e javascript

Adesso non ci resta che lanciare il nostro comando per “avviare” gulp e quanto da noi scritto, scriviamo quindi nella console:

Aggiungiamo, quindi, per esempio il codice:

dove andremo a colorare il contenuto di rosso.

Ricarichiamo la pagine e vedremo il nostro testo diventare rosso per incanto.

Ottimizziamo le immagini

Ottimizzare le immagini è un’operazione molto semplice e praticamente immediata.

Ci basterà usare questo codice:

Nel particolare, dopo aver caricato il tool necessario creeremo un nuovo task che recupererà tutte le immagini sotto “dev/img” e le salverà, ottimizzate (comando “imagemin()”) sotto la cartella dist/img.

Lanciamo quindi da shell

per avere le nostre immagini ottimizzate.

Comprimere css e Javascript

Anche la compressione dei file css e javascript risulta molto semplice e immediata, ci basterà scrivere il seguente codice:

Oltre a caricare uglify, concat e csso andremo a creare 2 tastk.

Il primo comprime tutti i file dentro “dev/js” e qualsiasi sottocartelle e li unisce in un singolo file chiamato main.js, che comprime (uglify) dentro la cartella “dist/js”.

Il secondo esegue le stesse operazioni per i file css.

Lanciamo quindi il comando per comprimere gli script

e quello per lo stile

Automatizzare la compressione di css, js e immagini

Allo stato attuale avremo finito il nostro script. Risulta però un po’ complicato aggiornare e richiamare manualmente ogni singolo task.

Se ti ricordi per compilare i file .scss di Sass avevamo automatizzato la procedura usando un .watch.

Andiamo quindi a riprendere quel codice e modifichiamolo come segue:

Poche modifiche ma sostanziali. Ad ogni modifica di una di quelle cartelle o file verranno richiamate tutte le funzioni e verranno quindi compilati i file sass, compilati e compressi i file js, le immagini e gli script.

Nel nostro file .html ci basterà fare riferimento all’unico file main.js e main.css presenti nelle cartelle dist, come il richiamo alle immagini stesse.

Ricordiamoci sempre di richiamare in console

Puoi scaricare il file demo (i moduli sono ovviamente esclusi) da questo link.

Flexbox: allineare i contenuti al centro con solo CSS3

Poche e semplici righe di codice per allineare i contenuti al centro di un “div”, senza usare le tabelle e senza usare Javascript. Ma come è possibile?

Semplice con flexbox e bastano veramente poche righe di codice:

Quello che siamo andati a fare è definire una classe “flex” che si occupa di allineare in verticale i contenuti e definirne altre due che li posizionano sopra e sotto e che necessitano di una sola riga di codice.

Il funzionamento è molto simile alle tabelle, non abbiamo però tutte le problematiche che essere comportano.