Uso de Bower para mejorar el desarrollo de WordPress

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

Bower es realmente genial para los equipos porque básicamente autodocumenta tus dependencias frontend. Con ese fin, es muy fácil actualizarlos a medida que tu proyecto cambia. Es genial para el proceso de construcción de tu proyecto tanto localmente como en el servidor. También puedes usar Bower para sacar tus propios repositorios privados y reutilizarlos en otros proyectos.

En el post anterior, cubrí lo que es Bower y algunas de sus características. En este post voy a hablar de los beneficios de usar Bower y cómo puede mejorar tu desarrollo de WordPress.

Es autodocumentado

Como mencioné anteriormente, Bower es realmente genial para los equipos porque autodocumenta tus dependencias front-end. Si has leído mi anterior publicación en Grunt, es casi exactamente así. Cuando instalas un paquete a través de Bower, escribes el bower install package-name (nombre del paquete de instalación de Bower), todo lo que tienes que hacer es añadir lo siguiente al final --save(guardar). Esto agregará ese paquete a la lista de dependencias en el archivo bower.json de tu proyecto.

Digamos que quieres incluir Bootstrap en tu tema de WordPress y quieres usar los archivos .scss durante tu proceso de construcción. Querrás usar el proyecto bootstrap-sass-official e instalarlo a través de Bower.

Así es como lo harías,

Abre la herramienta de línea de comando de tu elección
Navega hasta la carpeta raíz de tu proyecto
Escribe bower install bootstrap-sass-official --save y presiona "Return (Volver)" (o "Enter (Entrar)")

Si todo está instalado correctamente, deberías ver dos cosas, una nueva carpeta bower_components y boostrap-sass-official añadida en tu archivo bower.json.

Querrás hacer esto para cada paquete que quieras usar con tu proyecto. Una vez que lo hagas, cualquier otro compañero de trabajo o de equipo podrá instalar fácilmente todos los paquetes necesarios para el proyecto. Todo lo que necesitan hacer es teclear "bower install" y todos los paquetes serán descargados e instalados para el proyecto.

Por supuesto, esta técnica no sólo se limita a los marcos frontend como Bootstrap. Hay todo un repositorio de paquetes que se pueden buscar y que están disponibles para incluir. Esto puede hacer que la gestión de las dependencias de tu proyecto de WordPress sea mucho más fácil.

Actualización de dependencias

Por otra parte, no es nada raro que los paquetes se actualicen a menudo, ¿verdad? Este es otro lugar en el que Bower se vuelve útil.

Ahora que tienes todas las dependencias de tu proyecto documentadas e instaladas, es realmente fácil actualizar esos paquetes cuando las actualizaciones están disponibles. Todo lo que necesitas hacer es escribir la bower update y Bower leerá todas tus dependencias en tu archivo bower.json e irá a ver si hay alguna actualización para bajar.

La forma en que Bower sabe si hay alguna actualización disponible es mirando la versión etiquetada en tu archivo bower.json y comprobando la última etiqueta en el repositorio GitHub del proyecto. Puedes ver esas versiones etiquetadas mirando la página de lanzamientos, como los Boostrap Sass releases (lanzamientos de Boostrap Sass).

Para entender más sobre el significado de las versiones etiquetadas, deberías revisar el versionado semántico. Esto es lo que la mayoría de los proyectos registrados de Bower usan para sus lanzamientos, así que es útil para entender lo que significan los números.

Proceso de construcción

Los paquetes que se instalan a través de Bower solo se necesitan para el tiempo de construcción o compilación, no es necesario añadirlos a tu repositorio. La carpeta bower_components es más o menos una carpeta temporal, así que también sugeriría añadirla a tu archivo .gitignore, así como en el repositorio basura de tu proyecto para que no los añadas.

Si tienes un servidor de construcción o tienes una integración continua configurada para tu proyecto, querrás asegurarte de que ejecutas una bower install al principio de tu construcción. Una vez que todas tus otras tareas se ejecuten, podrías vaciar la carpeta bower_components o asegurarte de ejecutar una bower update(actualización de bower) en cada compilación posterior.

Si utilizas Grunt para tus tareas de construcción, hay un plugin grunt llamado grunt-bower-task que puede hacer funcionar una bower install por ti.

Repositorios privados

También puedes usar a Bower para sacar tus propios depósitos privados. Esto puede ser genial para reutilizar el código en todos los proyectos. Digamos que tienes una plantilla o un marco personalizado que usas para cada proyecto. Podrías guardarlo como tu propio repositorio GitHub, y luego meterlo en tus otros proyectos usando Bower.

Tendrás que asegurarte de registrarlo en el Registro Público de Bower para poder descargar. No te preocupes, si alguien no tiene acceso a él, no será capaz de derribarlo.

Conclusión

En esta publicación, hablé sobre las formas en que Bower puede ayudar a tu desarrollo de WordPress. Me centré en documentar y actualizar las dependencias de tu proyecto. También me referí al uso de Bower como parte de tu proceso de construcción y el uso de tus propios depósitos privados también.

En la próxima publicación, explicaré cómo instalar Bower en tu próximo o actual proyecto. También compartiré algunas formas avanzadas de usarlo en tu proyecto.