Share
A lo largo de esta serie, hemos examinado Bower y cómo puede mejorar nuestro desarrollador de WordPress. A medida que terminemos esta serie, veremos cómo configurar Bower para su próximo proyecto. Específicamente, cubriremos cómo instalar, actualizar y personalizar varios componentes utilizando Bower.
En publicaciones anteriores, hablé sobre qué es Bower y cómo puede ayudarlo con su desarrollo de WordPress. En este post, te mostraré cómo configurar Bower para tu proyecto y algunas técnicas avanzadas con él también..
Algunos de los conceptos son similares a Grunt, por lo que sugeriría echar un vistazo a una publicación anterior, Configuración de Grunt para su próximo proyecto. Finalmente estamos entrando en algún código. Hagámoslo!
La clave para Bower en un proyecto es la Bower.json expediente. Esto es lo que se analizará durante un instalación de la glorieta Para usted y cualquier consumidor de su proyecto. También es necesario para guardar dependencias, pero más sobre esto más adelante..
Lo primero que vamos a hacer es crear un Bower.json archivo en la carpeta raíz del proyecto. Sugeriría comenzar con al menos el nombre, la descripción y la versión..
Esto es lo que comenzaremos con:
"name": "tuts-bower", "description": "Proyecto de ejemplo para el tutorial sobre Bower for Tuts +", "version": "1.0.0"
Ahora que tenemos un Bower.json Archivo, vamos a añadir Bootstrap a nuestro proyecto. Vamos a hacer esto yendo a la línea de comandos y escribiendo bower instalar bootstrap-sass-official --save. Esto debería crear un bower_components carpeta con un bootstrap-sass-official carpeta en su interior, junto con la actualización de nuestra Bower.json expediente.
Así es como debería verse ahora:
"name": "tuts-bower", "description": "Proyecto de ejemplo para el tutorial en Bower for Tuts +", "version": "1.0.0", "dependencies": "bootstrap-sass-official": " ~ 3.1.1 "
Notarás que se agregan dependencias y hay bootstrap-sass-official junto con el último número de versión.
Una de mis características favoritas de Bower es lo sencillo que es actualizar los componentes que uso en un proyecto. Para aquellos que me conocen, por lo general soy uno para probar la última versión de las bibliotecas que estoy usando actualmente. Tan pronto como sale un nuevo lanzamiento de Bootstrap, lo estoy introduciendo en un proyecto. Bower hace que sea muy fácil hacer esto.
En nuestro ejemplo anterior, la tilde "~" delante del número de versión simplemente significa usar al menos esta versión. También actualizará su proyecto a cualquier nueva versión de parche cuando ejecute actualización de Bower. Por ejemplo, cuando / si Bootstrap se actualiza a 3.1.2, simplemente puede ejecutar actualización de Bower y te actualizarás a esa versión.
Hay varias formas diferentes en las que puede especificar qué versiones de cada componente usar.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Ahora que tenemos instalado Bootstrap, integrémoslo en nuestro proyecto. Para el ejemplo en esta publicación, solo voy a agregar los estilos al proyecto, no el JavaScript o las fuentes. Incluyo estos en el proyecto completo en GitHub.
Lo primero que vamos a hacer es crear un estilo.scss Archivo que compilaremos en nuestro archivo style.css en la raíz de nuestro proyecto. Normalmente creo una estructura como css / sass / entonces coloca todo mi .scss archivos en la carpeta sass. Sigamos adelante y creemos nuestra estilo.scss archivar allí.
Ya que estamos haciendo un tema, necesitamos algunos comentarios en la parte superior, entonces podemos importar en el bootstrap.scss Archivo que derribamos con Bower. Tendrá que averiguar el camino hacia él, luego use un @importar Para traerlo así:
/ *! Nombre del tema: Tuts Bower Tema URI: http://code.tutsplus.com/ Versión: 1.0.0 Descripción: Proyecto de ejemplo para tutorial en Bower for Tuts + Autor: Jason Bradley Autor URI: http://jasonbradley.me Licencia: GNU Licencia pública general v3.0 Licencia URI: http://www.gnu.org/licenses/gpl-3.0.html * / // Importar estilos de Bootstrap @import '… /… / bower_components / bootstrap-sass-official / vendor / activos / hojas de estilo / bootstrap ';
Estoy usando grunt-contrib-sass en mi proyecto de ejemplo, ahora cuando ejecutamos nuestro compilador Sass, compilará el bootstrap.scss en nuestro style.css expediente. Ahora tenemos todos los estilos de Bootstrap agregados a nuestro proyecto.
Hay dos formas de personalizar estos componentes: Me centraré en el estilo. Una forma es anular los estilos con otra hoja de estilo o inferior en el orden de las cosas que se compilan en tu .scss archivos. Otra forma, la que recomiendo, es anular la existente .scss archivos que está tirando con Bower.
Echemos un vistazo a la bootstrap.scss archivo al que hice referencia en la sección anterior. Es esencialmente importando al otro. .scss Archivos que necesita compilar. Si observa los archivos y el orden en que se importan las cosas, debería ver el variables.scss archivo en la parte superior. Como proyecto, Bootstrap ha hecho un gran trabajo al extraer los estilos comúnmente sustituidos o reutilizados, como los colores y los tamaños de fuente, aquí..
Lo que podemos hacer es copiar el bootstrap.scss Archivo y agregarlo como uno de nuestros temas .scss archivos en el css / sass carpeta. Una vez que hagamos eso, querremos cambiar la ruta de todos los archivos que importa para que apunten a nuestra bower_components directorio.
También podemos añadir nuestro propio .scss archivos dentro de este archivo para anular cosas, como las variables sass en variables.scss. Digamos que querías actualizar el color de fondo. Hay una variable dentro de Bootstrap variables.scs archivo llamado $ body-bg, y podemos simplemente anular eso en nuestros temas variables.scss expediente.
Ambos ejemplos anteriores estarían cambiando de esto:
// Variables centrales y mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
a esto:
// Variables principales y mixins @import "… /… / bower_components / bootstrap-sass-official / vendor / asset / stylesheets / bootstrap / variables"; // Anulando las variables predeterminadas de Bootstrap @import "variables"; @import "… /… / bower_components / bootstrap-sass-official / vendor / asset / stylesheets / bootstrap / mixins";
Esto es algo que es un poco más difícil de explicar sin una demostración concreta, así que puse un ejemplo en GitHub para que pueda echar un vistazo.
Con esto concluye nuestra serie sobre Bower. Hablamos sobre qué es Bower, cómo puede ayudar a su desarrollo de WordPress y ahora hablamos sobre cómo configurarlo.
Bower se ha convertido realmente en el administrador de dependencia de facto de facto, por lo que espero que esto le ayude a conocer el concepto y a comprender cómo utilizarlo en sus propios proyectos..
