Configuración esencial de Grunt

Hace algunos años atrás un desarrollo requería añadir en nuestro proyecto de producción muchísimas hojas de estilo, scripts en javascript, e imágenes de diferentes tamaños. Esta cantidad de requests consumen muchísimo tiempo de carga en el servidor y de descarga del lado del browser, además, Google comenzó a penalizar en su Page Rank las páginas no optimizadas.

Luego se comenzó a escribir todo en 1 solo archivo CSS o JS, solucionando la cantidad de requests y obteniendo archivos enormes que hacían sumamente tedioso el mantenimiento de estos archivos.

Al pasar del tiempo y buscando soluciones, se comenzó a minificar los archivos para mantener todo en 1 solo archivo y optimizando el tamaño de los mismos, de igual forma no se lograba solucionar la facilidad de mantenimiento.

Hasta que finalmente comenzaron a salir a la luz los preprocesadores como LESS, SASS, COFFEE SCRIPTS entre otros, estos permiten optimizar los estilos y scripts para luego ser compilados y obtener archivos minificados, optimizados y de fácil mantenimiento en el tiempo.

Pero surge otro problema, hacer esta compilación y minificación constantemente consume muchísimo tiempo y durante el tiempo de desarrollo se convierte en algo tedioso de realizar por ser una tarea repetitiva.

Por ello se buscó optimizar y automatizar estas tareas, llegando asi GRUNT a solucionar esta labor, empleando menos horas de trabajo en tareas repetitivas como minificación, compilación, pruebas unitarias, validaciones, etc. Utilizando NodeJS como motor de compilación, y un archivo de configuración, es capaz de realizar múltiples tareas en paralelo y de forma asíncrona, al igual que añadir nuevas mejoras y plugins de forma facil ya que basicamente es Javascript.

Las configuraciones son variadas y dependen del desarrollo en el cual te encuentres, a continuación te dejo una configuración básica para cualquier proyecto.

Y por supuesto, si le sacaste provecho a este post, ¡no olvides compartirlo en tus redes sociales!

¡Hasta un próximo post!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.