Contenido
Los ejecutores de tareas de JavaScript como Grunt se han vuelto extremadamente populares entre los desarrolladores de aplicaciones para el usuario. Esto se debe a que ayudan a hacer lo único que todos queremos hacer en nuestro trabajo: ¡ahorrar tiempo!
Pero con más de 5,000 (y contando) complementos Grunt ahora disponibles, puede ser difícil para los desarrolladores encontrar esos "diamantes en bruto". Hemos echado un vistazo a nuestra época en la que nos atascamos en Grunt para encontrar la receta perfecta de complementos de Grunt que deberías estar usando.
01. Uglify
Todo desarrollador front-end que se precie conoce las ventajas de minificar archivos JavaScript, y eso es exactamente lo que hace este complemento. Tal es su popularidad, que en realidad está incluido en la Guía de inicio de Grunt. A pesar del nombre, este complemento también se puede usar para embellecer su código JavaScript, aunque eso no es particularmente útil para el uso de producción.
02. Sass
Puede que haya cierto debate sobre qué preprocesador de CSS realmente gobierna el gallinero, pero aquí en Stickyeyes, nos hemos decidido por Sass en lugar de su principal rival, Less. Este complemento nos permite escribir nuestros archivos Sass y compilarlos en CSS automáticamente. Las ventajas de usar un preprocesador CSS justifican un artículo separado en sí mismo, pero es seguro decir que si no estás usando uno, ¡llegarás muy tarde a la fiesta!
03. CSSMin
Este complemento es el equivalente CSS de Uglify. Simplemente obtiene los archivos CSS especificados y los minimiza. Por supuesto, si va a usar esto junto con el complemento Sass, debe asegurarse de que esta tarea se ejecute después de la tarea Sass.
Hay muchas alternativas a CSSMin que también pueden reducir el tamaño de sus archivos CSS utilizando técnicas ligeramente diferentes; CSS nano, CSS wring, CSS shrink, etc. Lea este práctico punto de referencia si está interesado en ese tipo de cosas.
04. Concat
Como sugiere el nombre, este complemento simplemente toma varios archivos y los concatena en uno. Al igual que con la minimización de código, la concatenación de archivos también es una de las mejores prácticas antiguas para reducir los tiempos de carga de la página.
La concatenación de archivos siempre debe usarse en producción tanto para JavaScript como para CSS. Esta suele ser la última tarea que se ejecuta, después de la tarea de preprocesamiento CSS y la tarea de minificación. Es fácil decirle a este complemento que concatene todos los archivos en un directorio específico, pero tenga cuidado con el orden en que se concatenarán los archivos; es posible que deba dar un orden específico o nombrar los archivos para que siempre estén concatenados en el orden que desee. .
05. ImageMin
En la misma línea que CSSMin y Uglify, ImageMin aborda otro antiguo problema para la carga de la página: el tamaño del archivo de imagen. La 'minificación' de imágenes suele ser un primer puerto de escala para la optimización, por lo que este complemento es esencial para reducir el tamaño total del archivo de página tanto como sea posible.
Si está trabajando con JPG, PNG, GIF o SVG (un formato de imagen vectorial cada vez más popular), este complemento proporcionará reducciones sin pérdidas en el tamaño del archivo de sus imágenes, sin que tenga que mover un dedo. Si tiene muchas imágenes en su proyecto, es una buena idea ejecutar esta tarea solo cuando está pasando a producción, en lugar de ejecutar esta tarea en un evento de vigilancia (consulte el siguiente punto).
06. Mira
Este complemento en realidad no afecta el front-end de su sitio web, pero es extremadamente útil para crear un proceso Grunt eficiente. Watch simplemente vigila cualquier directorio que especifique, y una vez que algo cambia, activará automáticamente ciertas tareas de Grunt.
Por lo tanto, puede configurar una condición de observación en su directorio "js" para ejecutar sus tareas de JavaScript, y otra en su directorio "css" para ejecutar sus tareas de CSS. ¡Esto significa que nunca tendrás que ejecutar manualmente tu proceso principal de Grunt! Simplemente inicialice la tarea de vigilancia gruñona antes de comenzar a hacer cambios y podrá olvidar que está allí.
Palabras: Jamie Shields
Jamie Shields es desarrollador de back-end en la agencia de marketing digital Stickyeyes.
¿Como esto? ¡Lee esto!
- Grunt vs Gulp: ¿Qué herramienta de compilación de JavaScript debería elegir?
- 8 formas de mejorar tu configuración de Grunt
- Los mejores temas gratuitos de WordPress
