Unodepiera
Unodepiera
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Cuando creamos nuevos proyectos, más aún si éstos son grandes, nos juntamos con cantidades indecentes de archivos js y css que debemos cargar en cada página.

En este tutorial vamos a ver cómo podemos utilizar gulp, un gestor de tareas para poder crear dos, una para que junte todos los js en un único archivo y los minifique, y otra para que haga lo mismo con los css.

De esta forma, en lugar de cargar 10 css y 10 js en cada página, cargaremos 1 de cada, con lo cuál la aplicación seguro que será más rápida.

Si te interesa saber más sobre gulp, aquí tienes una entrada sobre livereload.

Lo primero que debemos hacer es crear un proyecto sin nada más, una carpeta css y otra js, dentro de la css creados dos archivos, primer.css y segundo.css, lo mismo con los js y añadimos el siguiente código de ejemplo para cada uno.


Ahora que ya tenemos los cuatro archivos para el ejemplo, debemos instalar todo lo necesario para utilizar gulp y sus plugins, así que ejecuta los siguientes comandos uno por uno en la terminal situado en el proyecto (necesitas tener instalado nodejs).


Instalamos gulp de forma local y global, lo mismo con uglify el cuál nos minificará el js, gulp-concat-css y gulp-concat nos ayudarán para concatenar varios archivos en uno, notify será el encargado de mostrarnos un mensaje una vez nuestra task haya finalizado.

Para utilizar gulp sólo es necesario crear un archivo en la raíz del proyecto llamado Gulpfile.js, crea el archivo y añade el siguiente código.


Cargamos todos los módulos que hemos descargado y creamos la configuración necesaria.

Creamos las tareas css y js, al método src de la task css le pasamos la ruta de nuestros archivos, en el primer caso le decimos que dentro de css busque cualquier archivo css, si por ejemplo, nuestros archivos estuviesen en otras carpetas, podríamos hacer algo así, css/**/*.css, dentro de css/cualquier carpeta/todos los css, y lo mismo con la tarea js.

Si nuestras rutas son más complejas también tenemos la opción de pasar un array con la ruta completa de cada archivo, así que tenemos opciones.

Finalmente concatenamos, minificamos y le decimos donde queremos que lo guarde, si ahora abrimos la terminal y ejecutamos los siguientes comandos uno por uno, nuestros archivos serán creados.


Uno dentro de out/css y otro dentro de out/js, si los abrimos veremos que tienen el siguiente aspecto.


Espero que te haya gustado, y, si no lo conocías ya tienes una herramienta más para añadir a las que ya tenías.

Saludos.