bower

Instalando Bower en Windows 10

¿Que es Bower?

Hoy os voy a hablar sobre Bower. ¿Qué es eso?

Bower es un gestor de dependencias para desarrolladores web front-end, lo cual es bastante similar a un gestor de paquetes pero no lo mismo. Un gestor de paquetes se usa para configurar sistemas, por ejemplo para establecer tu entorno de desarrollo y con los parámetros que normalmente construyas en muchos proyectos. Sin embargo, un gestor de dependencias es específico para un proyecto. Con él manejaras todas las dependencias del proyecto y las dependencias serán guardadas en tu proyecto (y ya está). Cuando empieces otro proyecto, deberás manejar las dependencias una vez más.

Por ejemplo: En el mundo del PHP encontramos a Composer como gestor de dependencias y a PEAR como gestor de paquetes. Con Composer se establecen todos los parámetros y extensiones para un simple proyecto mientras que los parámetros de PEAR establecen nuevas extensiones y librerías al núcleo de php (al core).

De hecho, Bower esta creado de manera específica para la parte front-end y está optimizada para esa idea. La mayor diferencia es que NPM (es cual es bastante usado en este mundo) creará necesariamente un árbol de dependencias (de gran tamaño) mientras Bower requiere un árbol de dependecias plano (poniendo la carga de la resolución de dependencias en el usuario).

In order to read this article in English, click here.

Instalando Bower en Windows

En primer lugar, deberás instalar NodeJS, debido a que Bower es una aplicación creada con NodeJS. Descarla la versión correcta para tu sistema (x64 para mi Windows 10), la v4.4.5 LTS:

Nodejs web
Link to NodeJS

Es bastante sencillo  instalar NodeJS… Solo Next, Next, Next… (¡No temas!):

NodeJS install

También es necesario instalar GIT, debido a que los paquetes de las dependencias deberán de estar en un repositorio GIT. Para instalar esto, las opciones por defecto son buenas, pero quizás preferirás hacer algún cambio.

A la misma vez, cuando instales NodeJS, NPM se instalará a la vez en tu sistema. Así pues, podrás abrir el “cmd” (símbolo de sistema) en tu Windows 10 para instalar Bower (para eso, click en “Inicio” y escribe “cmd”, pulsando luego a “intro”).

El comando para instalar Bower es: npm install -g bower

NPM install

Ok, está hecho, Bower está instalado :) Ahora, para usar Bower, es necesario crear el bower.json (el archivo de dependencias del proyecto) en la raiz del proyecto. Para mí, voy a crear un proyecto llamado AguilasCity.com (bueno, es solo un ejemplo) en mi ordenador, en la carpeta C:\wamp\www\AguilasCity.com

Para acceder con el cmd de Windows es necesario usar el comando “cd”, y para crear el archivo de dependencias del proyecto (bower.json) el comando: bower init

NPM install project

De hecho, puedes actualizar este fichero, el “bower.json“, el cual es creado en la misma raíz del proyecto. Después actualizaré la licencia y quizás algunas cosas más, como el  nombre del proyecto (es mejor si no usas mayúsculas).

bower install

Por ejemplo, si quieres tener varias dependencias como bootstrap, fontawesome y jquery, usarás el comando: bower install –save bootstrap fontawesome jquery

Si no usas la opción “–save”, el paquete será instalado pero el bower.json no será actualizado, y esto sería un problema si tu cambias el paquete de sitio (por ejemplo, si pones el proyecto en el servidor de producción).

bower update

Con el comando “bower update”, todos los paquetes de bower.json serán actualizados. Es bueno saber que tu puedes indicar la versión de los paquetes, incluso un rango de versiones. Para esto y más, deberías de visitar Bower.io

Referencias en mi página index.php

Para usar estos paquetes, tienes que enlazar las librerías a tu proyecto. Este sería mi página de index.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AguilasCity.com</title>
    <meta name="description" content="Aguilas City, the best place in the world">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    				<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    				<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

</head>
<body>

<?php echo "testing AguilasCity.com :)"; ?>

</body>
</html>

Leave a comment

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s