Guía de gulp cómo minificar css

Hola hoy les tengo algo muy bueno y eficiente que es minificar archivos css con gulp, que es algo relativamente fácil y muy rápido de hacer.

¿Qué es minificar archivos?

Minificar archivos como la propia palabra lo indica es hacerlos menos pesados y más optimizados, por con el fin de mejorar muchos aspectos en un sitio web.

¿Es obligatorio minificar archivos?

no no es necesario pero si ayuda mucho si quieres tener un mejor seo y una mejora en la velocidad de carga de tu sitio web, ya que cuando un sitio web es muy lento, tus visitantes no les da ganas de ingresar y si tus visitas se salen antes de 4 minutos de tu sitio web, hace que pierdas muchos puntos con la indexación y ranking de google.

¿Cómo me ayuda gulp a minificar archivos?

gulp lo puede hacer mediante tareas programadas con la función task, puedes nombrar tareas y programarlas para cuando quieras que suceda.

Procedimiento para minificar archivos

  • procedemos a instalar gulp-minify mediante la terminal, abriendo una en la misma carpeta del proyecto y escribiendo lo siguiente:

npm install --save-dev gulp-minify-css

  • Dentro de nuestra instalación creamos un nuevo archivo llamado gulpfile.js.

  • teniendo el archivo creado y las dependencias instaladas procedemos a hacer lo siguiente, que es escribir nuestra primer tarea en el archivo gulpfile.js:

    var gulp = require('gulp');
    var minifyCSS = require('gulp-minify-css');

    gulp.task('minify-css', function() {
    return gulp.src('/carpetadelproyecto/css/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('/carpetadelproyecto/css/min'))
    });

Para ejecutar la tarea solo tenemos que escribir en la misma terminal que abrimos gulp + nombre de la tarea = gulp css y los archivos se minifican automáticamente, si quieres que esto se haga automáticamente sin necesidad de escribir nada podemos hacer esto:

    gulp.task('default', function(){
    gulp.run('css');
    gulp.watch('/carpetadelproyecto/css/*.css', function () {
        gulp.run('css');
    })
    });

Con esto cada que guardemos el archivo solito se minifica sin necesidad de escribir de nuevo en la terminal el comando de la tarea.

Vídeo del artículo