Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Una introducción a Grunt

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Marilu (you can also view the original English article)

Hoy en día, la mayoría de los desarrolladores web de primera línea pasan mucho tiempo con tecnologías como Sass, LESS, HTML y JavaScript. Los últimos dos años han sido un momento emocionante en el desarrollo web y tecnologías como Grunt han contribuido a dicha emoción.

En esta serie, planeo presentarte a Grunt y hablar de cómo puede mejorar nuestro desarrollo de temas y plugins de WordPress. También trabajaremos para preparar a Grunt para que lo uses en tu próximo proyecto. Finalmente, también echaremos un vistazo a las herramientas de la línea de comandos.

Acerca de Grunt

Grunt es una herramienta de automatización para los desarrolladores del front-end. Está escrita en JavaScript, así que deberías poder entenderlo si sabes JavaScript. Aquí está la descripción del sitio web de Grunt:

En una palabra: automatización. Cuanto menos trabajo tengas que hacer al realizar tareas repetitivas como la minificación, la compilación, las pruebas unitarias, el linting (analizar código), etc., más fácil será tu trabajo. Después de configurarlo, un "task runner" puede hacer la mayor parte del trabajo por ti y por tu equipo, básicamente sin esfuerzo.

Grunt es una herramienta agnóstica del sistema operativo, así que si desarrollas en Mac, Windows o Linux, deberías poder usarla. Esto lo hace realmente genial para equipos más grandes que tienen una mezcla de plataformas con las que desarrollan. La mejor parte es que al establecer tu proyecto con Grunt, es fácilmente compartible con otros también. Cubriremos esto más en otro post.

Node.js

Para aquellos que no han trabajado o escuchado acerca de esto, Node.js es un tiempo de ejecución de JavaScript. Realmente ha despegado en los últimos años y tecnologías como Grunt y Bower han ayudado a acelerar su adopción. Aquí está la descripción del sitio web del Node:

Node.js es una plataforma construida en el tiempo de ejecución de JavaScript de Chrome para construir fácilmente aplicaciones de red rápidas y escalables. Node.js utiliza un modelo de E/S basado en eventos y sin bloqueo que lo hace ligero y eficiente, perfecto para aplicaciones en tiempo real con uso intensivo de datos que se ejecutan en dispositivos distribuidos.

Node es el único prerrequisito para usar el Grunt y necesitas tenerlo instalado en tu máquina y posiblemente en tus servidores. Grunt usa npm para instalar y administrar los plugins. Puedes leer más sobre los requisitos en la página de Introducción del sitio web de Grunt.

Gruntfile

Una vez que se instalan las tareas que necesitas para tu proyecto, necesitas una forma de ejecutarlas. Aquí es donde el archivo Gruntfile.js entra en escena. El archivo Gruntfile especifica las tareas que se deben incluir y las opciones que se especifican para ejecutarlas.

Aquí es donde probablemente especificarás tus objetivos y fuentes para cada tarea. Un ejemplo sería señalar tus archivos .scss precompilados y especificar la ubicación en la que deseas que se guarden los archivos .css compilados. También especificará otras opciones que cada plugin tendrá a tu disposición. Estas se suelen documentar con cada plugin.

Tareas

En mi opinión, las tareas están realmente donde está el poder. Una tarea es simplemente una forma de ejecutar un grupo de plugins. Tú querrás especificar una tarea por defecto que se ejecute cuando ejecutes 'grunt'. Puedes usar la tarea de vigilancia para que puedas ejecutar automáticamente tareas o plugins cuando cambien archivos específicos en tu proyecto.

Planeo explayarme más sobre las tareas en un post posterior.

Conclusión

Grunt es definitivamente una herramienta que deberías conocer si eres un desarrollador de front-end o de WordPress. Esta cita del sitio de Grunt realmente resume las cosas,

El ecosistema de Grunt es enorme y crece cada día. Con literalmente cientos de plugins para elegir, puedes usar Grunt para automatizar casi cualquier cosa con un mínimo de esfuerzo. Si aún nadie ha construido lo que necesitas, crear y publicar tu propio plugin de Grunt para npm es pan comido.

Si aún no has empezado a usarlo en tus proyectos, definitivamente deberías considerarlo.

Recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.