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:
cd /Volumes/hd1TB/Dropbox/MIACARTELLA/temi/sitoweb/wp-content/themes/nomemiotema/
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:
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:
npm i gulp
Se avete problemi di permessi particolari, potete eseguire sempre lo stesso comando ma come amministratori:
sudo nano npm i gulp
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.
/**
* Istruzioni
* https://www.npmjs.com/
*
* @step1 npm i --save-dev gulp sass gulp-sass gulp-uglify gulp-babel gulp-rename gulp-concat gulp-clean-css gulp-autoprefixer gulp-notify @babel/core @babel/preset-env
*
* @step2 npm i bootstrap jquery
*
* @step3 (optional) any other package: npm i ionicons
*/
const { src, dest, watch, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const cleancss = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const notify = require('gulp-notify');
const uglify = require('gulp-uglify');
// Define paths
let paths = {
stylesVendors: {
from: [
'node_modules/aos/dist/aos.css',
'node_modules/swiper/swiper-bundle.min.css',
'node_modules/venobox/dist/venobox.css'
],
to: 'dist/css'
},
scriptsVendors: {
from: [
'node_modules/aos/dist/aos.js',
'node_modules/swiper/swiper-bundle.min.js',
'node_modules/venobox/dist/venobox.js'
],
to: 'dist/js'
},
styles: {
from: [
'sass/*.scss'
],
to: 'dist/css'
},
stylesAdmin: {
from: [
'sass/admin/*.scss',
],
to: 'dist/css/admin'
},
scripts: {
from: [
'js/scripts.js'
],
to: 'dist/js'
}
}
// SCSS vendors
function styleVendors() {
return src(paths.stylesVendors.from, { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(concat('vendors-style.css'))
.pipe(cleancss({
level: {
2: {
all: false, // sets all values to `false`
removeDuplicateRules: true // turns on removing duplicate rules
}
}
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest(paths.stylesVendors.to, { sourcemaps: '.' }));
}
// JS vendors
function javascriptVendors() {
return src(paths.scriptsVendors.from)
.pipe(babel({
presets: [
['@babel/preset-env', {
modules: false
}]
]
}))
.pipe(uglify())
.pipe(concat('vendors.js'))
.pipe(rename({ extname: '.min.js' }))
.pipe(dest(paths.scriptsVendors.to))
.pipe(notify({
"title": "😎 JS Vendors generated!",
"sound": "Pop",
"onLast": true,
"wait": true
}));
}
// SCSS
function style() {
return src(paths.styles.from, { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(concat('style.css'))
.pipe(cleancss({
level: {
2: {
all: false, // sets all values to `false`
removeDuplicateRules: true // turns on removing duplicate rules
}
}
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest(paths.styles.to, { sourcemaps: '.' }));
}
// SCSS admin
function styleAdmin() {
return src(paths.stylesAdmin.from, { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(concat('custom-admin.css'))
.pipe(cleancss({
level: {
2: {
all: false, // sets all values to `false`
removeDuplicateRules: true // turns on removing duplicate rules
}
}
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest(paths.stylesAdmin.to, { sourcemaps: '.' }));
}
// JS template
function javascript() {
return src(paths.scripts.from)
.pipe(babel({
presets: [
['@babel/preset-env', {
modules: false
}]
]
}))
.pipe(uglify())
.pipe(concat('scripts.js'))
.pipe(rename({ extname: '.min.js' }))
.pipe(dest(paths.scripts.to))
.pipe(notify({
"title": "😎 JS generated!",
"sound": "Pop",
"onLast": true,
"wait": true
}));
}
// Watchers
watch([
'sass/admin/*.scss',
'sass/admin/**/*.scss'
], styleAdmin);
watch([
'sass/*.scss',
'sass/**/*.scss',
'!sass/admin/**',
'!sass/code/**'
], style);
watch([
'js/vendors/*.js',
'js/*.js',
'!js/admin/**'
], javascript);
// Yo baby!!
exports.default = parallel( styleAdmin, javascriptVendors, javascript, styleVendors, style );
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!
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?
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.
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?
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à?
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.