Laravel Blog

Tutorial, tips, consigli e patemi su Laravel & dintorni

Ottimizzazione CSS: Gulp-uncss

Continuando nell’opera di ottimizzazione alla scoperta del fantastico mondo di Gulp mi sono chiesto se potevo per gruppi di layout rimuovere i css non utilizzati al fine di ridurre ulteriormente i tempi di caricamento.

La risposta è stata UnCss ed in particolare il modulo gulp-uncss

Andiamo prima a installare gulp-uncss e glob (prerequisito ma dovrebbe già essere installato)

npm i gulp-uncss

npm i glob

Aggiornamo quindi il nostro file Gulpfile.js creando un nuovo task che partendo dai file .css già concatenati e minificati deve andare a verificare quali istruzioni css non vengano utilizzate dalle nostre pagine

gulpfile.js

var uncss = require('gulp-uncss');
var glob = require('glob');

gulp.task('glob', function() {
    gulp.src('dist/css/**')
        .pipe(uncss({
            html: glob.sync("layouts/**/*.blade.php")
        }))
        .pipe(gulp.dest('dist/css'));
});

A questo punto non ci resta che lanciare il nostro nuovo task

gulp glob

Per quanto al momento su questa installazione di test non usi granchè sono passato con un solo comando schedulabile (augurandomi che non faccia casini) da 286K a 43K

1 comment for “Ottimizzazione CSS: Gulp-uncss

  1. Pingback: jesse

Rispondi

%d blogger cliccano Mi Piace per questo: