10

Gulp e WordPress per ottimizzare e velocizzare il sito

Da quando ho cominciato ad usare Gulp non ne faccio più a meno e se pensate che sia difficile, vi sbagliate di grosso! Vedremo come usare Gulp da terminale su Mac e come implementarlo su un tema WordPress.

Per dirla in parole povere, Gulp ci permettere di eseguire delle operazioni complesse in pochi comandi ed eseguire a cascata determinate azioni. Nello specifico ci sono dei comandi da sapere e da tenere bene a mente, ma per prima cosa vi indicherò i passaggi da fare per ottenere il risultato desiderato, in questo caso, come minificare e minimizzare il codice JavaScript e CSS di un tema WordPress.

Supponiamo di avere una cartella di un tema per WordPress qualsiasi. Di solito la directory dei temi installati su un sito è questa: “http://www.miosito.com/wp-content/themes/nomemiotema/“. Non dobbiamo fare altro che inserire all’interno della cartella del tema un file JavaScript, e chiamarlo “gulpfile.js“. Quindi avremo il percorso “http://www.miosito.com/wp-content/themes/nomemiotema/gulpfile.js

Bene, ora abbiamo creato il file dentro al quale andremo a scrivere le varie funzioni e concatenazioni. Ma prima di tutto andiamo da terminale alla cartella del nostro tema. Per fare questo il comando da terminale da digitare sarà il seguente:

Ovviamente il comando vero e proprio è “cd” e quello che segue dopo 1 spazio è il percorso alla cartella del vostro tema. Per facilitarvi il lavoro, potete anche usare (come faccio io) il drag and drop di un percorso direttamente su terminale per indicare il percorso, qui un esempio:

percorso_terminale

Ora che siamo nella directory giusta, dobbiamo come prima cosa installare Gulp nella cartella del tema, ovviamente questa cartella che si chiamerà “node_modules” non dovrà essere uppata nel server del vostro sito, ma dovrà essere solamente usata in locale e ci servirà per eseguire i vari comandi.

Per installare Gulp apriamo il terminale su Mac e digitiamo questo codice:

Se avete problemi di permessi particolari, potete eseguire sempre lo stesso comando ma come amministratori:

Lanciato il comando aspettate che venga eseguita l’operazione e che venga creata la directory “node_modules”. Ora che abbiamo Gulp installato nella cartella del nostro tema, potete sbizzarrirvi a creare le vostre Tasks. Per i miei lavori mi sono creato un file gulp che nello specifico si occupa delle seguenti cose:

  • Specifico quali file deve andare a prendermi
  • Minimizzo il file CSS e JavaScript
  • Creo il file style.min.css e scripts.min.js
  • Uppo i files minimizzati nel server del sito web
  • Visualizzo una notifica nel desktop del mio Mac ad operazioni effettuate.

Per rendervi le idee il più chiare possibile vi mostro il mio file Gulp, che potrebbe andare bene a molti di voi che vogliono velocizzare il proprio sito web tramite la minificazione di alcuni files.

Ovviamente Gulp è la madre che si occuperà di ogni task che gli indicherete, ma dovrete installare dei pacchetti aggiuntivi a vostro piacimento e che facciano al caso vostro ed installarli sempre nel percorso specifico, in questo caso la cartella del tema.

Molti addons per Gulp li potete trovare in questa pagina.

Nelle prime righe del mio codice come vedere ho elencato il comando di installazione di ogni singolo pacchetto Gulp che può essere installato uno ad uno oppure come poco sotto, tramite una unica stringa a cascata, a mio avviso molto più comodo e veloce.

Nel codice ho volutamente commentato ogni singola riga, così che riusciate nel vostro intento. Come potete notare, ho anche commentato il pipe gulp.dest, perché se decidete di usarlo, allora dovrete specificare il percorso esatto dove gulp dovrà salvare il file minificato.

Altra cosa importante è che il file gulp non deve essere sul server del vostro sito, ma sempre in locale, sopratutto quando dovete inserire dati sensibili, come le credenziali del server stesso.

Per domande o chiarimenti scrivete pure un commento!

10

Quindi Gulp è installato sul Mac e in locale faccio le varie operazioni di ottimizzazione e solo dopo queste lo carico all’interno del mio spazio web giusto?

Rispondi

Ciao Andrea, si esattissimo!

E nel momento in cui io eseguo delle modifiche devo ricaricare tutto il sito online? Mi manca questo passaggio! Grazie Mille 🙂

Assolutamente no! Volendo puoi caricare solo il file minimizzato style e JS 🙂

Sarebbe interessante vedere l’integrazione di un modulo / task che usino preprocessori css come SASS.

Rispondi

Ciao Antonio, è semplicissimo, basta scegliere uno dei tanti Packages che trovi su Gulp per SaSS e poi integrarlo nel gulpfile.js, per esempio questo

Ciao.. é possibile una volta caricati i file in ftp con gulp, scaricarli e fare l’unminify per fare altre Modiche oppure bisogna avere necessariamente sempre i files di partenza per fare nuove modifiche?

Rispondi

Ciao Mario, in realtà quello che dici non é corretto. Mi spiego. Il file originale del css ti resta sempre. Al suo posto si aggiunge un altro file duplicato MA minificato. Però mi hai dato uno spunto per ampliare questo articolo 🙂

Ciao Christian, quindi Gulp è un tool che principalmente può tornare utile a chi sviluppa per esempio una applicazione o un tema wp, chi invece come me utilizza il tema e fa qualche personalizzazione lato css, perde di utilità?

Rispondi

Ciao Antonio, dipende. Gulp lo puoi usare per molti linguaggi di programmazione ed è alla fine un Robot che lavora per te. Se utilizzi un tema comprato ha senso se lo studi bene e vuoi ottimizzare ogni singolo file JS e CSS per il front-end.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Usando questo sito, accetti l’uso dei cookies.

Accetto