Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Tutorial práctico de Bower: ¿Qué es?, ¿Cómo funciona?
Actualizado el 26 Octubre, 2016 y leído 1,503 veces
Calificación: 10.00 / 10

Tutorial práctico de Bower: ¿Qué es?, ¿Cómo funciona?

Anexsoft

Cuando comenzamos nuestros proyectos web, lo ideal es buscar librerías para enriquecer nuestro proyecto ya sea usando plugins como datepicker, gridviews, combobox, etc, con la finalidad de mejorar la experiencia del usuario. Lo que comunmente hacemos es entrar a google y buscar algún plugin disponible, descargarlo y agregarlo a nuestro proyecto, pero este proceso con Bower se acabo, ya que este nos va a permitir agregar todas las dependencias de nuestro proyecto mediante comandos. 

 

¿Qué es Bower?

Es un gestor de dependencias desde el lado cliente desarrollado por Twitter, el cual es algo similar a lo que hace composer, npm o nugget. La finalidad de Bower es gestionar las dependencias de nuestros archivos del lado cliente como, bootstrap, jquery, entre otros. Es decir, que vamos a tener todo nuestras dependencias en una archivo json y mediante un comando se descargará todo a nuestro proyecto, si hay futuras versiones de las librerías estas podrán ser actualizadas dejando a un lado la tediosa tarea de ir a la web, descargar y agregarlo manualmente.

 

¿Cómo se instala Bower?

Demasiado sencillo, lo primero que vamos hacer es instalar node en nuestro PC. Ingresan a la web oficial y descargan la versión más reciente para su sistema operativo. Luego de eso deberiamos tener instalado la consola de node en nuestro SO, en mi caso uso windows y le doy a buscar en inicio node command prompt.

Ahora vamos a ejecutar el siguiente comando para instalar Bower en nuestra PC y que este se encuentre disponible en todo el proyecto.

npm install -g bower

 

Creando nuestro primer proyecto con Bower

Luego de haber realizado estos pasos vamos a comenzar a crear nuestro primer proyecto. Creen una carpeta y mediante la consola de NODE posicionen la ruta del fichero en la carpeta que han creado. En windows el comando sería el siguiente:

cd mi_proyecto

Donde hayamos definido mediante la consola carpeta a trabajar ejecutaremos los comandos que comenzarán a descargar las dependencias a nuestro proyecto.

Lo que haremos ahora es ejecutar el siguiente comando para que bower cree nuestro archivo de dependencias, este también lo podemos hacer manualmente ¿pero mejor que Bower lo haga no?

bower init

Nos harán varias preguntas, yo solo puse el nombre del proyecto y la descripción al resto le dí ENTER y se creará el siguiente archivo

{
  "name": "anexsoft",
  "authors": [
    "Eduardo <hitogoroshi@outlook.com>"
  ],
  "description": "Dependencias de mi proyecto",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

 

Agregando las dependencias

Ahora que tenemos nuestro bower.json configurado nos toca la tarea de buscar packages, en el siguiente enlace podemos buscar rapidamente los plugins https://bower.io/search/. Por experiencia las dependencias que más necesitamos las podemos agregar con escribir su nombre y así es en la mayoría de los casos para dejar a un lado la tediosa tarea de buscarlo manualmente. Por ejemplo mediante el siguiente comando vamos agregar las dependencias a nuestro proyecto.

bower install jquery --save
bower install bootstrap --save
bower install fontawesome --save
bower install momentjs --save

Y con estos comandos hemos agregado a nuestro proyecto actual una carpeta llamada bower_components, esta contiene todas las dependencias descargadas y nuestro bower.json ha sido modificado.

NOTA: el --save lo que hará es modificar nuestro archvo bower.json para que agregue las dependencias.

{
  "name": "anexsoft",
  "authors": [
    "Eduardo <hitogoroshi@outlook.com>"
  ],
  "description": "Dependencias de mi proyecto",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.1",
    "bootstrap": "^3.3.7",
    "moment": "momentjs#^2.15.2",
    "font-awesome": "fontawesome#^4.7.0"
  }
}

Ahora ustedes pueden copiar ese archivo bower.json y agregarlo a su proyecto, luego mediante el comando bower update se descargará todas las dependencias. ¿Genial no?, de esta manera podemos tener un bower.json base para todos nuestros proyectos.

 

¿Cómo buscar nuevas versiones de mis dependencias?

Por ejemplo queremos ver si hay una nueva versión de Bootstrap lo que podemos hacer es ejecutar el siguiente comando

bower info bootstrap

Y si queremos actualizar solamente bootstrap

bower update bootstrap

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.