7.2. Creazione di temi basati su Bootstrap. Compilazione SASS tramite Gulp

Nella lezione precedente abbiamo visto come compilare i file LESS utilizzando il watcher integrato in PhpStorm. In questo tutorial creeremo un tema basato su SASS Bootstrap. Se non riesci a gestire LESS e la compilazione tramite PhpStorm, puoi provare a usare Gulp e SASS. In questa fase delle lezioni non importa se usiamo LESS o SASS, ma consiglio di utilizzare SASS e Gulp perché la compilazione è più veloce e la configurazione di Gulp è più semplice.

Gulp è un gestore di attività per JavaScript. Lo useremo per aggiungere due task: uno per monitorare le modifiche nella cartella sass quando aggiungiamo nuovi stili, e l’altro per compilare i file SASS in CSS.

Procediamo con l’installazione. Dopo aver installato Drupal, dobbiamo scaricare il tema Bootstrap e posizionarlo nella cartella /themes:

https://www.drupal.org/project/bootstrap

Per utilizzare SASS nei sotto-temi di Bootstrap, dobbiamo usare questo kit chiamato sass:

Copia la cartella sass nella cartella /themes, separata da bootstrap, e rinominala con il nome del tuo tema. Nel nostro caso sarà drupalbook:

Ora rinomina tutti i file da THEMENAME al nome del tuo tema. Ad esempio, il file THEMENAME.starterkit.yml diventerà drupalbook.info.yml, THEMENAME.libraries.yml diventerà drupalbook.libraries.yml, e così via. Non dimenticare di rinominare anche i file nella cartella config — anche lì troverai file con THEMENAME:

All’interno dei file potrebbe esserci ancora il nome THEMENAME, ad esempio nel file sass/config/schema/THEMENAME.schema.yml:

Per essere sicuri di non aver dimenticato nulla, cerca “THEMENAME” in tutta la cartella del sotto-tema tramite PhpStorm:

Nel campo di ricerca inserisci “THEMENAME” e sostituiscilo con il nome del tuo tema dove necessario.

Ora scarica Bootstrap e posizionalo nella cartella /themes/drupalbook/bootstrap:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

Ci interessa la versione SASS di Bootstrap:

Per il nostro tema, ci serve l’intera cartella bootstrap. Posizionala in modo che il percorso alla cartella assets sia: /themes/drupalbook/bootstrap/assets:

Abbiamo copiato tutti i file necessari per il tema. Ora dobbiamo configurare Gulp per compilare SASS.

Per prima cosa installiamo Node.js:

https://nodejs.org/en/

Node.js è un runtime JavaScript che permette di eseguire codice per compilare SASS in CSS. Si installa su Windows come un normale programma. È consigliato scaricare la versione più recente (ad esempio 7.x.x):

Dopo aver installato Node.js, riavvia PhpStorm o la console CMD se è già aperta. La console per Node.js può essere aperta da PhpStorm:

Oppure tramite il menu di Windows:

Nella console, digita node -v per verificare che Node.js sia installato correttamente:

Successivamente, spostati nella cartella del tema drupalbook e installa Gulp. Usa il comando cd per navigare tra le cartelle. Il comando cd .. (cd + spazio + due punti) ti riporta alla cartella superiore:

Per cambiare unità disco (ad esempio su D:), digita semplicemente D:.

Ora che sei nella cartella del tema, inizializza i componenti npm:

npm init

Questo creerà il file package.json, che conterrà tutti i pacchetti installati tramite npm. Durante la procedura premi semplicemente Invio.

Ora installiamo Gulp:

npm install --save-dev gulp

Installiamo anche gulp-sass:

npm install --save-dev gulp-sass

Se utilizzi Gulp 4.x, il file Gulpfile.js dovrà essere così:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');
 
var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};
 
function styles() {
  return gulp
    .src(paths.styles.src, { sourcemaps: true })
    .pipe(sass())
    .pipe(gulp.dest(paths.styles.dest));
}
 
function watch() {
  gulp.watch(paths.styles.src, styles);
}
 
var build = gulp.parallel(styles, watch);
 
gulp.task(build);
gulp.task('default', build);

Crea ora il file Gulpfile.js nella radice del tema:

/themes/drupalbook/Gulpfile.js

Per l’esempio sopra (Gulp 4.x) devi anche installare le librerie aggiuntive:

npm install gulp-concat
npm install gulp-uglify

Abbiamo indicato a Gulp di compilare i file SASS nella cartella css, quindi creala e aggiungi un file style.css:

/themes/drupalbook/css/style.css

Questo file conterrà tutto il CSS compilato.

Tutto è pronto per iniziare la compilazione SASS. In PhpStorm, apri la cartella del tema, clicca con il tasto destro su Gulpfile.js e seleziona “Show Gulp Tasks” dal menu contestuale:

Seleziona il task default e si aprirà la finestra di esecuzione:

Ora, ogni volta che modifichi un file SASS nel tema, Gulp ricompilerà automaticamente i CSS.

Come risultato della compilazione, il CSS apparirà nel file style.css e il colore di sfondo del sito diventerà giallo:

All’inizio potrebbe sembrare che la configurazione di Gulp richieda molto tempo, ma se hai già installato Node.js, ti basta aggiungere il file Gulpfile.js e installare i pacchetti gulp e gulp-sass. Se hai difficoltà con l’installazione o la configurazione, scrivilo nei commenti.