Minificar CSS con Gulp

Una de las ventajas de usar Gulp es que tiene una infinidad de módulos que puedes instalar y aprovechar. En esta osación vamos a ver como podemos minificar uno o varios archivos CSS en uno sólo.

Minificando CSS

Lo primero que debemos hacer es instalar los módulos adecuados con npm en nuestro proyecto.

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

	
	npm install gulp-rename --save-dev

Con ellos ya instalados los incluímos en nuestro gulpfile.js y creamos la tarea adecuada:

	var gulp = require('gulp'),
		minifyCss = require('gulp-minify-css'),
		rename = require('gulp-rename');

	var cssDir = 'src/css/main.css',
		cssDest = 'public/css';	

	gulp.task('styles', function() {
		gulp.src(cssDir)
		.pipe(rename({
			basename: 'main',
			extname: '.min.css'
		}))
		.pipe(minifyCss())		
		.pipe(gulp.dest(path.cssDest))
	}); 

La tarea obtiene el archivo main.css de la ruta src/css, a continuación lo renombra a main.min.css y por último lo minifica y lo deja en la ruta dist/css.

Esto nos serviría para minificar un unico archivo, pero ¿y si quiero comprimir N ficheros en un único main.min.css? Pues aquí viene la solución.

Debemos instalarnos un nuevo módulo adicional:

	npm install gulp-concat --save-dev

Y una vez instalado tenemos que modificar un poco nuestra tarea styles para que haga lo que queremos. El nuevo código sería el siguiente:

	var gulp = require('gulp'),
		minifyCss = require('gulp-minify-css'),
		rename = require('gulp-rename'),
		concat = require('gulp-concat');
		

	var cssDir = 'src/css/main.css',
		cssDest = 'public/css';
		
	gulp.task('styles', function() {
		gulp.src(cssDir)
			.pipe(concat('main.css'))
			.pipe(rename({
				basename: 'main',
				extname: '.min.css'
			}))
			.pipe(minifyCss())		
			.pipe(gulp.dest(cssDest))
	});

Lo que hemos añadido es una linea que nos permite concatenar los recursos que hemos obtenido en un único archivo main.css que a continuación renombramos y minicamos, dejándolo finalmente en la ruta elegida.

Espero que os haya servido.