{"id":5475,"date":"2016-06-21T11:59:28","date_gmt":"2016-06-21T10:59:28","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5475"},"modified":"2016-06-21T12:03:36","modified_gmt":"2016-06-21T11:03:36","slug":"introduccion-a-bower","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/06\/introduccion-a-bower\/","title":{"rendered":"Introducci\u00f3n a Bower, gestor de paquetes"},"content":{"rendered":"

Hola a todos y saludos desde el \u00e1rea web de la Escola Espai. En este post hablaremos de un complemento ideal para el desarrollo front-end. Hablaremos e haremos una introducci\u00f3n a Bower, un gestor de paquetes y dependencias front end.<\/p>\n

Introducci\u00f3n a Bower<\/h2>\n

Bower, es un sistema de gesti\u00f3n de paquetes que usaremos para gestionar nuestros paquetes (packages) de desarrollo web front-end. Cuando hablamos de paquetes nos referimos a conjunto de archivos y\/o librer\u00edas que solemos usar en nuestros proyectos. Como por ejemplo: Bootstrap, Font-awesome, AngularJs, cualquier plugin jQuery, etc..<\/p>\n

Sin Bower, cuando queremos instalar uno de estos paquetes en nuestro proyecto web, simplemente vamos al sitio web en cuesti\u00f3n, los descarg\u00e1mos y los coloc\u00e1mos a mano en una carpeta de nuestro proyecto, o bien configur\u00e1mos una ruta absoluta al CDN en las etiquetas script<\/em> o link<\/em>, necesarias para incluir esos paquetes. Adem\u00e1s, si existiera una actualizaci\u00f3n m\u00e1s adelante deber\u00edamos actualizar los archivos o las rutas CDN.<\/p>\n

Con Bower ese trabajo, se puede hacer con un sencillo comando de consola.
\nBower<\/strong>, por lo tanto, nos facilita el d\u00eda a d\u00eda<\/strong>. Acostumbrarse a usarlo puede ayudar bastante en determinados procesos.<\/p>\n

Vamos a instalarlo y a ver un ejemplo de como funciona:<\/p>\n

Instalaci\u00f3n de Bower<\/h2>\n

Bower es un programa realizado con NodeJS por lo que si no tienes Node el primer paso ser\u00e1 instalarlo.
\nAl instalar NodeJS se instala tambi\u00e9n un gestor de paquetes Javascript llamado \u201cnpm\u201d. Este gestor sirve para descargar e instalar en nuestro sistema cualquier programa basado en NodeJS y se opera por l\u00ednea de comandos. La manera de instalar Bower en nuestro ordenador es ejecutando el correspondiente comando de instalaci\u00f3n en la consola de com, v\u00eda npm, como sigue:
\nnpm install -g bower<\/code><\/p>\n

Con esto tendremos Bower instalado en nuestro ordenador.<\/p>\n

Inicializar nuestro proyecto con Bower<\/h2>\n

Ahora nos dirijimos a la carpeta de nuestro proyecto. Yo voy a realizar un proyecto con Bootstrap y Font-awesome.
\nAll\u00ed crearemos un archivo en la ra\u00edz del proyecto llamado .bowerrc<\/code>. Este ser\u00e1 el archivo de configuraci\u00f3n para esta instancia de Bower. De momento escribiremos lo siguiente y guardaremos.<\/p>\n

{\r\n  \"directory\": \"libs\"\r\n}\r\n<\/pre>\n
As\u00ed le especificamos que la carpeta donde estar\u00e1n nuestras librer\u00edas ser\u00e1 \u201clibs\u201d.
\nAhora volveremos a la l\u00ednea de comandos y nos situaremos en la carpeta de nuestro proyecto<\/span> y escribiremos esto:
\nbower init<\/code><\/p>\n
Con esta sentencia vamos a configurar nuestro proyecto. Nos preguntar\u00e1 una serie de detalles para configurarlo. Podemos rellenar los que tengamos claro de momento. Aqu\u00ed ten\u00e9is una captura de mi ejemplo:<\/p>\n
\"Inicializaci\u00f3n
Ejemplo de configuraci\u00f3n de un proyecto con Bower.<\/p><\/div>\n
Este proceso crea un fichero .json (bower.json) en la ra\u00edz de nuestro poyecto.<\/p>\n
Instalar paquetes front end en nuestro proyecto con Bower<\/h2>\n
Bien! Pues ahora solo nos queda por hacer es instalar los paquetes que queramos para nuestro proyecto. Para hacerlo volveremos al terminal y escribiremos bower install<\/code> y los paquetes que queramos separados por espacio finalizado con un --save<\/code>. Para este proyecto de prueba usar\u00e9 Bootstrap y Font-awesome y la l\u00ednea de comando a ejecutar ser\u00e1 la siguiente:
\nbower install bootstrap font-awesome --save<\/code><\/p>\n
Una vez hecho esto veremos lo genial que es Bower:<\/p>\n