Gulp: come minimizzare file css e javascript, compilare file scss, ed ottimizzare le immagini.

di Giulio di Bari :: 06 ottobre 2020

Gulp è un task runner, cioè un programma in grado di automatizzare uno o più processi che altrimenti dovrebbero essere eseguiti manualmente.

Ci siamo occupati di introdurre Gulp e di come installarlo, quindi ripartiamo da dove avevamo lasciato l'articolo precedente... se non lo avete letto fatelo adesso perchè è la premessa a quanto andremo adesso a spiegare.

Nella cartella del nostro progetto, oltre ai file e directory creati in fase di creazione del progetto, abbiamo questa architettura:

src: directory che contiene i file css, javascript ed immagini sorgenti, che verranno eleborate da Gulp
dst: directory che contiene i file destinati alla produzione, cioè elaborati da Gulp
gulpfile.js: file javascript dove inseriamo i task

Oggi vediamo come creare alcuni task per ottimizzare file css, javascript ed immagini presenti nel nostro progetto web, e compilare i file scss in css.

I file sorgenti saranno quindi inserira nella directory "src" dove all'interno creiamo 3 cartelle, una destinata ai css, una ai file scss, una ai javascript, una alle immagini.

src
   - js
   - css
   - scss
   - images

Quando si parla di minimizzare o minificare i file css e javascript intendiamo l'operazione che comprime al massimo i file.

Ad esempio prova ad aprire questo file "minificato" di JQuery: puoi vedere come il codice sia compatto e ridotto al minimo. Questo significa un peso minore del file.

Il nostro obbiettivo e quello di ottenere lo stesso risultato partendo dai file css e js del nostro sito.

Ottimizzare i file JAVASCRIPT

Vediamo iniziamlemente come ottimizzare i file JAVASCRIPT. L'obiettivo è accorpare tutti i file js in un file unico a cui daremo il nome "all.js", che dovremo poi minificare.

Andiamo a collocare nella cartella "src/js" tutti i javascript che dovranno subire questo "trattamento".

Dopodichè installiamo quattro plugin a livello di progetto (non a livello globale).

gulp-strip-debug: si occupa di eliminare tutte le chiamate a console, alert etc. dal codice
gulp-concat: serve a concatenare tutti i files in uno unico, all.js
gulp-uglify: serve a minificare il file
gulp-size: stampa in console il peso totale, in byte, del file o dei files.

Accediamo quindi alla cartella del progetto

# cd /var/www/progettoGulp

ed installiamo i quattro plugin

# npm install gulp-strip-debug --save-dev
# npm install gulp-concat --save-dev
# npm install gulp-uglify --save-dev
# npm install gulp-size --save-dev

Installati i plugin, apriamo il "gulpfile.js" e lo modifichiamo così

var gulp = require('gulp')

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var size = require('gulp-size');

gulp.task('scripts', function() {
	return gulp.src('src/js/**/*.js')
	    .pipe(stripDebug())
	    .pipe(concat('all.js'))
	    .pipe(uglify())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

Nel file abbiamo incluso, tramite "require", i quattro plugin che richiameremo all'interno del task

Il task lo chiamiamo "scripts" ed opererà così

prende il contenuto di tutti i files javascript presenti nella cartella "src/js" (ed eventuali relative sottocartelle tramite il doppio asterisco)
lo elabora attraverso i vari plugins visti pocanzi
salva il risultato, cioè il file "all.js" nella cartella "dst"

Salviamo il file, e lanciamo da linea di comando il task usando il comando "gulp" seguito dal nome del taks "scripts"

# gulp scripts

L'output da terminale è il seguente

[16:57:39] Using gulpfile /var/www/progettoGulp/gulpfile.js
[16:57:39] Starting 'scripts'...
[16:57:41] all files 156 kB
[16:57:41] Finished 'scripts' after 1.53 s

Apriamo la cartella "dst" e troveremo il file "all.js" composto dall'unione di tutti i nostri file js, ottimizzati e minificati.

Ottimizzare i file CSS

Adesso creiamo un task per ottimizzare i css. I plugin necessari sono i seguenti

gulp-csso: si occupa di minificare i file css
gulp-autoprefixer: aggiunge automaticamente, dove necessari, i prefissi -webkit, -moz ecc… per quelle funzioni CSS che ancora non sono state implementate in tutti i browser con la sintassi standard

Entriamo nella cartella del progetto

# cd /var/www/progettoGulp

ed installiamo i plugin

# npm install gulp-csso --save-dev
# npm install gulp-autoprefixer --save-dev

Modifichiamo il "gulpfile.js" aggiungendo questi plugin ed un nuovo task chiamato "styles"

var gulp = require('gulp')

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var size = require('gulp-size');

var csso = require('gulp-csso');
var autoprefix = require('gulp-autoprefixer');

gulp.task('scripts', function() {
	return gulp.src('src/js/**/*.js')
	    .pipe(stripDebug())
	    .pipe(concat('all.js'))
	    .pipe(uglify())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('styles', function() {
	return gulp.src('src/css/**/*.css')
	    .pipe(autoprefix())
	    .pipe(concat('all.css'))
	    .pipe(csso())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

Bene, lanciamo il secondo task con il comando

#gulp styles

L'output sarà

[17:07:48] Using gulpfile /var/www/progettoGulp/gulpfile.js
[17:07:48] Starting 'styles'...
[17:07:48] all files 748 B
[17:07:48] Finished 'styles' after 57 ms

Nella cartella "dst" troveremo il file minificato "all.css"

Per lanciare assieme i due task sarà sufficiente digitare il comando "gulp" seguito dai nomi dei task da lanciare

# gulp scripts styles

In alternativa è più pratico inserire nel "gulpfile.js" un nuovo task che chiamiamo ad esempio "build" che altro non fa che richiamare gli altri task presenti nel file.

gulp.task('build', gulp.series('scripts', 'styles'));

Il nostro script diventerà questo:

var gulp = require('gulp')

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var size = require('gulp-size');

var csso = require('gulp-csso');
var autoprefix = require('gulp-autoprefixer');

gulp.task('scripts', function() {
	return gulp.src('src/js/**/*.js')
	    .pipe(stripDebug())
	    .pipe(concat('all.js'))
	    .pipe(uglify())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('styles', function() {
	return gulp.src('src/css/**/*.css')
	    .pipe(autoprefix())
	    .pipe(concat('all.css'))
	    .pipe(csso())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('build', gulp.series('scripts', 'styles'));

Chiamermo quindi il task "build" per lanciare i due task

# gulp build

Nota: invece del plugin "gulp-csso", possiamo usare il plugin "gulp-minify-css". l'ultilizzo è analogo. Sarà sufficiente installarlo, includerlo nello script, e richiamarlo nel task

...............
var minifyCSS = require('gulp-minify-css');
...............
gulp.task('styles', function() {
	return gulp.src('src/css/**/*.css')
	    .pipe(autoprefix())
	    .pipe(concat('all.css'))
	    .pipe(minifyCSS())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

Ottimizzare le immagini

Mettiamo tutte le immagini del nostro sito nella cartella "dst/images".

Utilizziamo il plugin "gulp-imagemin", che andiamo ad installare così

# npm install gulp-imagemin --save-dev

Modifichiamo il "gulpfile.js" aggiungendo questo plugin ed un nuovo task chiamato "images"

var gulp = require('gulp')

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var size = require('gulp-size');

var csso = require('gulp-csso');
var autoprefix = require('gulp-autoprefixer');

var imagemin = require('gulp-imagemin');

gulp.task('scripts', function() {
	return gulp.src('src/js/**/*.js')
	    .pipe(stripDebug())
	    .pipe(concat('all.js'))
	    .pipe(uglify())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('styles', function() {
	return gulp.src('src/css/**/*.css')
	    .pipe(autoprefix())
	    .pipe(concat('all.css'))
	    .pipe(csso())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('images', function() {
    return gulp.src('src/images/*')
    	.pipe(imagemin())
    	.pipe(gulp.dest('dst/images'));
});

gulp.task('build', gulp.series('scripts', 'styles','images'));

Il task preleva le immagini dalla nostra cartella, le ottimizza, e le pone in una analoga cartella "images" all'interno della cartella "dst"

Bene, lanciamo il task con il comando

# gulp images

L'output sarà

[17:17:35] Using gulpfile /var/www/progettoGulp/gulpfile.js
[17:17:35] Starting 'images'...
[17:17:35] gulp-imagemin: Minified 8 images (saved 250 kB - 44.4%)
[17:17:35] Finished 'images' after 198 ms

Dentro la cartella "dst", se non era presente, è stata creata la cartella "images" e dentro troviamo le immagini ottimizzate con un peso ridotto.

Volendo possiamo lanciare il task "build" in cui abbiamo aggiunto la chiamata al task "images"

# gulp build

NOTA: Il "return" inserito all’interno di ogni task non è strettamente necessario ma permette, nel caso avessimo altre funzioni che dipendessero da questo task, di sapere quando esso è terminato per poter così continuare ad eseguire le operazioni successive.

Compilare i file scss

Per concludere creiamo un task per compilare i file scss.

Un file scss è una evoluzione dei css, perchè ci consente di utilizzare variabili e funzioni al suo interno. I file scss, dopo essere stati scritti, vanno compilati, cioè trasformati in file css. Per fare questo esistono vari programmi. Uno di questi è GULP.

A titolo di esempio creiamo un file che chiamiamo "stile.scss" e lo mettiamo della cartella "src/scss"

$primary-color: #000000;
$font: 'Arial';

body {
	background: $primary-color;
	font-family: $font;
	p {
		color: #ffffff;
	}
}

Questo file ".scss" contiene le variabili "$primary-color" e "$font": con la sua compilazione otterremo un classico file ".css", dove al posto di "$primary-color" e "$font", verranno inseriti i relativi valori. Il risultato infatti sarà questo:

body {
  background: #000000;
  font-family: "Arial"; 
}
body p {color: #ffffff;}

Procediamo adesso con l'utilizzo di GULP: iniziamo con installare il plugin "gulp-sass" che è il compilatore dei file scss (così come dei file sass)

# npm install gulp-sass --save-dev

Modifichiamo il "gulpfile.js": aggiungiamo questo plugin e creiamo un nuovo task chiamato "sass" che preleva tutti i file della cartella "src/scss", li compila, e li salva, come file ".css", in una cartella che chiamiamo "dst/css_from_scss"

var gulp = require('gulp')

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var size = require('gulp-size');

var csso = require('gulp-csso');
var autoprefix = require('gulp-autoprefixer');

var imagemin = require('gulp-imagemin');

var sass = require('gulp-sass');

gulp.task('scripts', function() {
	return gulp.src('src/js/**/*.js')
	    .pipe(stripDebug())
	    .pipe(concat('all.js'))
	    .pipe(uglify())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('styles', function() {
	return gulp.src('src/css/**/*.css')
	    .pipe(autoprefix())
	    .pipe(concat('all.css'))
	    .pipe(csso())
	    .pipe(size())
	    .pipe(gulp.dest('dst'));
});

gulp.task('images', function() {
    return gulp.src('src/images/*')
    	.pipe(imagemin())
    	.pipe(gulp.dest('dst/images'));
});

gulp.task('sass', function() {
	return gulp .src('src/scss/**/*.scss')
	.pipe(sass())
	.pipe(gulp.dest('dst/css_from_scss'));
});

gulp.task('build', gulp.series('scripts', 'styles','images','sass'));

Lanciare il task "build", in cui abbiamo aggiunto la chiamata al task "sass", e la compilazione è servita!

Provate da soli questo esercizio: spostate la compilazione dei file scss come primo task, in modo da poter poi minifare i file css ottenuti con il task "styles".

Gulp e Grunt

Un altro task runner, molto simile a Gulp, è Grunt

La principale differenza tra i due è che Gulp gestisce i processi tramite la RAM, utilizzando principalmente il modulo stream di Node.js, e li scrive immediatamente sul file di destinazione, mentre Grunt utilizza principalmente il modulo fs (file system) di Node.js, creando file temporanei mentre esegue le operazioni. Per questo motivo Gulp svolge le operazioni più velocemente.

Dedicheremo dei prossimi articoli a Grunt in cui rivedremo glie stessi esempi realizzati per Gulp.

Stay tuned!