En el tutorial Workflow con Gulp, Sass, Browser-sync y Uglify vimos como automatizar los procesos de cambio en los archivos de forma ágil y compilar los recursos optimizándolos para servirlos de forma minificada en un proyecto, este recurso comenzaba a quedarse obsoleto y era hora de actualizarlo poniendo además la guinda al pastel.

 

La guinda del pastel no es otra que gulp-purgecss y su misión es recorrer nuestros archivos del proyecto para mapear todas las clases que estamos utilizando y eliminar las que no usamos del archivo css final, estareis pensando ¿como Tailwind?, pues si, pero más cómodo todavía.

Como comenté en el anterior post, en los ultimos años, Webpack ha ganado terreno a Gulp, pero personalmente me siento muy comodo trabajando con este último, ya que debido a las necesidades de cada proyecto que tengo que realizar he trabajado con diferentes workflows personalizados y le he cogido el gustillo.

Este workflow incluye también una versión más personalizable de me.css, con sass, mixins y un archivo _variables.scss para configurar los puntos más relevantes de toda la librería, como el tamaño del box, los breakpoints, el número de columnas de los grids, los margins y paddings y muchos más mixins que si estás familiarizado con sass encontrarás de mucha utilidad y fáciles de replicar para crear tus propias funciones en sass.

Gulp requiere para cada Workflow una versión especifica, o al menos una versión aproximada a la que se ha utilizado para crear el workflow, eso no es problema porque para eso tenemos el Control de versiones de nodeJS, este Workflow en concreto lo he construido con la versión de Gulp 10.14.1

 

me.css + sass + uglify + purge-css + browser-sync + gulp-plumber + gulp-clean-css

Todas las dependencias de este workflow han sido actualizadas a su última versión estable. Podemos instalar cada una de las dependencias del proyecto con gulp en modo –save y hacer un npm init para crear el package.json, pero esa tarea nos la vamos a ahorrar, este es el package.json para hacer npm install e instalar todas las dependencias necesarias:

{
  "name": "workflowDidesweb",
  "version": "1.0.0",
  "author": "Roque Arnás Izquierdo",
  "homepage": "https://didesweb.com/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/didesweb/"
  },
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "browser-sync": "^2.27.11",
    "gulp-clean-css": "^3.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-purgecss": "^5.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2"
  }
}

A continuación creamos el gulpfile.js, en la línea 6 tenemos que modificar el valor de path por la ruta de nuestro proyecto.

gulpfile.js

/*
    Workflow sass + browser-sync + uglify + purgecss
    Roque Arnás Izquierdo
    https://didesweb.com/
*/
var path        = "localhost/didesweb";
var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');
var cleanCSS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var purgecss    = require('gulp-purgecss');
gulp.task('browser-sync', function() {
    var files = ['**/*.php'];
      browserSync.init(files, {
      proxy: path,
      notify: false
    });
});
gulp.task('purgecss', function () {
    gulp.src('app/styles/main.css')
    .pipe(
      purgecss({
        content: ['**/*.php']
      })
    )
    .pipe(gulp.dest('app/styles'))
})
gulp.task('sass', function () {
    gulp.src('assets/styles/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(cleanCSS())
    .pipe(gulp.dest('app/styles'))
    .pipe(reload({stream:true}));
});
gulp.task('uglify', function() {
    gulp.src('assets/scripts/**/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest('app/scripts'))
    .pipe(reload({stream:true}));
});
gulp.task('default', ['sass', 'uglify', 'browser-sync'], function () {
    gulp.watch("assets/styles/**/*.scss", ['sass']);
    gulp.watch("assets/scripts/**/*.js", ['uglify']);
});
gulp.task('production', ['purgecss'], function () {
    gulp.start('production');
});

 

Con esto podemos instalar con npm las dependencias y archivos necesarios para comenzar a trabajar, pero para ahorraros crear todas las carpetas y archivos de recursos o la necesidad de configurar el gulpfile.js y ademas incluir me.css con todos los archivos y carpetas ya preconfigurados aquí os dejo el enlace a github para descargarlo y el comando para clonarlo por medio de la terminal:

 

mecss-sass-unusedcss (Github)

git clone https://github.com/didesweb/mecss-sass-unusedcss

Una vez descargado haremos npm install y se instalarán todas las dependencias, respecto a gulp, en este workflow tenemos 2 comandos, gulp para desarrollo (incluye browser-sync) y gulp production para producción, cuando realicemos el paso a producción se ejecutará gulp-purgecss y veremos la reducción del peso de nuestro main.css, el cual volverá a compilarse sin mapear las clases eliminadas al volver a hacer gulp por si necesitamos realizar cambios.

 

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

CAPTCHA


Utilizamos cookies propias y de terceros para el correcto funcionamiento de la web, personalizar el contenido y mostrar publicidad en función de las preferencias del visitante. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies