Minificar Javascript con gulp

En el artículo anterior veíamos como minificar el código CSS con un móduo de Gulp. En esta ocasión le toca el turno al javascript.

Vamos a ver como minificar uno o varios archivos javascript generando un único archivo main.min.js de tal forma que optimicemos las peticiones de carga del navegador.

Para hacer todo esto vamos a necesitar, a parte de los módulos vistos en el artíiculo anterior, los módulos gulp-uglify y streamqueue.

	npm install gulp-uglify --save-dev

	npm install streamqueue --save-dev

El código que debemos añadir en nuestro gulpfile.js sería el siguiente:

	var gulp = require('gulp'),
		concat = require('gulp-concat'), 
		rename = require('gulp-rename'),
		uglify = require('gulp-uglify'), 	
		streamqueue  = require('streamqueue');	
		
	var jsDir = 'src/js/*.js',
		jsLibsDir = 'src/js/libs/*.js',
		jsDest = 'public/js/';
		
	gulp.task('compressJS', function() {  
		return streamqueue({ objectMode: true },
			gulp.src(jsLibsDir),
			gulp.src(jsDir)
		)
			.pipe(concat('main.js'))
			.pipe(gulp.dest(path.jsDest))
			.pipe(rename('main.min.js'))
			.pipe(uglify())
			.pipe(gulp.dest(path.jsDest));
	});

Paso a paso vemos que obtenemos todas los archivos de 2 rutas diferentes con streamqueue. Streamqueue nos servirá para obtener los ficheros de dos rutas concretas, en este caso jsDir y jsLibsDir y concatenarlas en un orden concreto. De este modo, como en nuestro caso tenemos una librería jQuery, nos aseguramos que lo primero de todo que carga sea la librería jQuery y luego todas las librerías que la usan de tal modo que no haya lugar para el error de ejecución.

A continuación, los concatenamos añadiendolo a un archivo main.js y lo dejamos en la ruta final. A continuación, repetimos la secuencia pero creando un archivo main.min.js y minificándolo con uglify() para dejarlo finalmente en la ruta final.

En este caso, hemos preferido generar ambos archivos main, uno minificado y otro sin minificar pero que contiene los códigos agrupados de todos los archivos javascript que hemos elegido. De este modo, tenemos tanto el código que usamos en nueestro entorno de desarrollo(que es más fácil de leer para un desarrollador) y el código para producción(el cual es más complejo de leer para una persona).

Por ultimo solo nos quedaría ejecutar la tarea con gulp en nuestra consola:/

	gulp compressJS

Espero que os haya sido de utilidad.