Minificar recursos de un sitio web con Gulp

Cada vez es mas importante mantener nuestra página web al día de las nuevas tecnologías, y cada vez mas, tenemos competidores que nos superan en posicionamiento web orgánico y en calidad de los diseños web. Por eso es importante mantener alto el PageSpeed de Google. El PageSpeed nos puntua la calidad de nuestro sitio web, y eso afecta al posicionamiento, a la accesibilitat y usabilidad de la web.

Para ejecutar GULP necesitamos tener instalado NodeJS en nuestra maquina, para ello vamos a la página Oficial de NodeJS

A continuación nos descargamos el código del Enlace de Github y lo ponemos al directorio donde tenemos los assets del proyecto (JavaScript, CSS, Imágenes).

Con el terminal en mano ejecutamos la siguiente instrucción:

npm install -g gulp
npm install

Npm install nos instala todos los paquetes necesarios para ejecutar las instrucciones de Gulp.

Una vez instalados los paquetes, cambiaremos los directorios para los de nuestro proyecto, css, js, img…

Para ejecutar las instrucciones de Gulp, abriremos un terminal en el directorio y podremos ejecutas las siguientes Ordenes (Tasks)

gulp minify-css

gulp uploads

gulp imagecache

gulp compress

Todo el código esta disponible en Github, se puede usar libremente y modificar.

const gulp = require('gulp');
var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');
var minify = require('gulp-minify');
var concat = require('gulp-concat');
var uglyfly = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');

// Minify CSS

gulp.task('minify-css', function() {
  return gulp.src('css/**') // * All files === ** All files recursive
    .pipe(cleanCSS({                    // Minify CSS
        compatibility: 'ie8',
        processImport: true,
        inline: ['none']
    }))
    .pipe(rename({ suffix: '.min' })) // Rename file with .min
    .pipe(concat('styles.min.css')) // All css files will concat in styles.min.css
    .pipe(gulp.dest('dist/css')); // Destination, final result
});

// END Minify CSS

// Minify Images => Destination dist/...

gulp.task('uploads', () =>
    gulp.src('uploads/**')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/uploads'))
);

gulp.task('imagecache', () =>
    gulp.src('imagecache/**')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/imagecache'))
);

// END Minify Images

// Minify JS

gulp.task('compress', function() {
  gulp.src('js/*.js')
    .pipe(minify({
        ext:{
            min:'.js'
        },
        exclude: ['tasks'],
    }))
    .pipe(uglyfly()) // Minify JS
    .pipe(rename({ suffix: '.min' })) // Rename files with the min
    .pipe(gulp.dest('dist')) // Destination, final results
});

// END Minify JS