Vediamo oggi come montare Gulp nel nostro ambiente di lavoro. Come ben saprete Gulp ci sarà utile per elaborare in modo rapido ed automatico una serie di task, in particolare ma non solo aggregare, compilare, minificare, comprimere e ottimizzare file CSS, Javascript e immagini.

Iniziamo installando node se non lo avete già fatto. Sul mac con brew lancio il seguente comando

brew install node

Grazie a node potrò ora installare Gulp a livello globale con -g finale

npm install gulp -g

Ora possiamo creare la nostra cartella di progetto esempio “test” e al suo interno installare Gulp localmente

npm install gulp

Lanciare il nostro primo task

Siamo ora pronti a lanciare il nostro primo task con Gulp. Vi ricordo che volendo potete spostare la cartella node_modules ad un livello superiore per utilizzarla anche in altri progetti. Se avete una repo ricordatevi di inserirla sul .gitignore

Creiamo il file gulpfile.js nella root del nostro progetto ed inseriamo il seguente codice per definire il task default di Gulp. Questo verrà eseguito semplicemente utilizzando il comando gulp senza parametri

//Indichiamo dipendenze
var gulp = require('gulp');
//Indichiamo Gulp default task
gulp.task('default', async function(){
    return console.log('Good Morning Gulp!');
});

gulp.task

definisce uno stream, gli assegna un nome univoco e stabilisce una sequenza di operazioni da elaborare.

gulp.src

definisce il file, la cartella, o l’insieme di file che saranno interessati dall’elaborazione.

gulp.dest

definisce la directory di destinazione in cui troveremo i file risultanti dall’elaborazione.

Definire un task

Per definire un task utilizziamo il metodo gulp.task() passando i parametri:

• una stringa con il nome del task
• una callback (spesso definito come funzione implicita)

pipe

Il metodo pipe() attiva la catena di elaborazione. Gli step di elaborazione ritornano uno o più stream di Node.js che ci consentono di eseguire operazioni in sequenza e utilizzare il risultato di uno step come input di quello successivo. Semplificando:

• prende come parametro l’azione seguente da compiere
• passa all’azione seguente il risultato ottenuto della precedente
• lancia l’elaborazione seguente

Minificare e concatenare file CSS e JS

Installo i plugin che mi serviranno per eseguire le seguenti operazioni e che poi passeremo alla funzione che dovrà eseguirli tramite require:

npm install gulp-concat
npm install gulp-clean-css
npm install gulp-uglify
npm install gulp-rename

gulp-concat

Chiaramente serve principalmente a concatenare i file

gulp-clean-css

Minimizza e pulisce i file css da codice superfluo

gulp-uglify

Minimiza file js

gulp-rename

Rinomina i file

//Indichiamo dipendenze
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    rename = require("gulp-rename"),
    uglify = require('gulp-uglify');



//CSS --- gulp css
gulp.task('css', function(){
    //css input
    var css_input  = ['src/**/*.css'];
    //css output dir
    var css_output = 'build/css';

    return ( gulp.src( css_input )
        //Concateno i file css in ordine alfabetico
        .pipe(concat('style.css'))
        //minimizzo css
        .pipe(cleanCSS())
        //rinomino risultato
        .pipe(rename({
            suffix: '.min'
        }))
        //sposto in destinazione
        .pipe(gulp.dest( css_output )));
});

//JS --- gulp js
gulp.task('js', function() {
    var js_input  = ['src/lib/jquery-*.js', 'src/js/**/*.js'];
    var js_output = 'build/js';
    return ( gulp.src( js_input )
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest( js_output )));
});

gulp.task( 'default', gulp.series('css', 'js') );