Laravel Blog

Tutorial, tips, consigli e patemi su Laravel & dintorni

Ottimizzazione CSS, JS, HTML con Laravel & Gulp – Parte 1

GulpJs è un Task Runner basato su Node.js.

Essenzialmente un Task Runner è un mero esecutore di task ripetitivi che possono essere automatizzati facendoci risparmiare tempo e salute.

Nell’utilizzo nell’applicativo sul quale sto lavorando mi serviva per:

  • Minificare e concatenare file Javascripts e Css;
  • Ottimizzare le immagini
  • Sostituire le referenze dei file originari con i sostituti (a prova di cache)
  • Pulire periodicamente le directory e spostare gli Asset (Js, Css, Immagini, Fonts) in una cartella accessibile dal browser

L’ho scoperto dopo aver sbattuto la testa su Grunt dove con una sintassi JSON-Style per ottenere qualcosa di simile stavo creando un file di configurazione che mi ricordava quasi la programmazione in BASIC spaghetti-style.

Ad ogni modo una installazione tipica di Laravel ha una struttura simile:

/app

/views

page.blade.php

/css

/js

/public

index.php

La directory /public è la nostra directory root. Il nostro applicativo è invece situato in una posizione non raggiungibile dal browser.

Il nostro file blade è il seguente:

page-blade.php

        <!-- build:css css/vendor.css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/plugins.css">
        <!-- endbuild --> 

E siamo interessati a concatenare i due files e successivamente minificarli, attribuendogli un hash random per non avere problemi di coerenza. Il risultato finale è il seguente:

page-blade-2.php

<link rel="stylesheet" href="/css/vendor-c876f293.css">

Abbiamo quindi creato una nuova versione del file page.blade.php tramite Gulp che contiene le referenze al nuovo .css. Il nostro script Gulp, inoltre, trasforma le path da relative ad assolute e sposta tutti gli Asset nella cartella public.

Il file di esempio che ho utilizzato per questa installazione è il seguente:

gulpfile.js

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
var del = require('del');
//var minifyHTML = require('gulp-minify-html');


gulp.task("default", ['clean'], function() {
  
  var jsFilter = filter('**/*.js');
  var cssFilter = filter('**/*.css');
  var userefAssets = useref.assets();

   gulp.src("layouts/**/*.blade.php")
    .pipe(userefAssets)         // Concatena con gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minifica qualsiasi sorgente javascript
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(csso())               // Minifica qualsiasi risorsa css
    .pipe(cssFilter.restore())
    .pipe(rev())                // Rinomina i file concatenati
    .pipe(userefAssets.restore())
    .pipe(useref())    
    .pipe(revReplace({ replaceInExtensions: ['.php'], canonicalUris: true}))    // Sostituisci nel file originario i link ai nuovi file
    //.pipe(minifyHTML({cdata:true,conditionals:true}))
    .pipe(gulp.dest('dist'));   // sposta nella directory dist

    
});



gulp.task('clean', function (cb) {
  del([
    'dist/css/**',
    'dist/scripts/**',
  ], cb);

  
});


gulp.task('publish', ['default'], function() {
  
    gulp.src([
        'dist/css/**'
    ])
    .pipe(gulp.dest('BASEPATH/public/css'));
    
    gulp.src([
        'layouts/css/fonts/**'
    ])
    .pipe(gulp.dest('BASEPATH/public/css/fonts'));      
    
    gulp.src([
        'dist/scripts/**'
    ])
    .pipe(gulp.dest('BASEPATH/public/scripts')); 
});

C’è ancora parecchio da sistemare (ad esempio non pulisce la directory public, non ci sono test e non c’è ancora un watcher ma è tutto manuale) ma abbiamo ottenuto lo scopo desiderato. Abbiamo creato una procedura automatica che ci permette di ottimizzare javascript e fogli di stile di TUTTI  i nostri file Blade !
Nelle directory originarie continueremo ad operare sui file con tutte le referenze a script e fogli di stile “in chiaro” poi dobbiamo compilare (gulp publish nel nostro caso) quando vogliamo aggiornare gli asset ed i nostri utenti visualizzeranno sempre una versione “ottimizzata” della nostra pagina che volendo in produzione possiamo fornire minificando anche l’HTML (rimuovendo ad esempio spazi, commenti, a capo)

 

1 comment for “Ottimizzazione CSS, JS, HTML con Laravel & Gulp – Parte 1

Rispondi

%d blogger cliccano Mi Piace per questo: