por En esta entrada, continuamos con la segunda parte del tutorial Primeros pasos con Bower.
Crear un proyecto
Para crear nuestro primer «Hola mundo» en Bower, crearemos un directorio donde alojarlo y accederemos a él desde la consola de comandos. Desde allí, simplemente ejecutamos:
bower init
Podemos ir rellenando los datos que nos pide escribiendo en el terminal y aceptando con «Enter«.
Esto nos va a crear un importante archivo: bower.json. Este archivo (que podéis editar con cualquier editor de texto, como Sublime Text 3) será el que almacene todas las dependencias, y podremos editarlo a mano o añadir dependencias mediante la consola de comandos. Os recomiendo lo abráis y veáis el archivo creado ahora y cómo queda tras añadir un plugin.
Añadir nuevos plugins
Ahora, vamos a añadir un plugin externo. Aunque en esta entrada no explicaré su funcionamiento, vamos a usar JQuery, la biblioteca Javascript más extendida. Para añadirlo, ejecutamos desde la consola de comandos lo siguiente:
bower install --save jquery
Podremos ver el progreso, que será algo parecido a esto:
La opción –save sirve para actualizar el fichero bower.json, de modo que, si lo analizamos, veremos cómo ha añadido una dependencia a jQuery. Además, veremos que ha descargado jQuery en el nuevo directorio bower_components.
Si añadiéramos otro componente más, igualmente añadiría la entrada al fichero bower.json y lo descargaría en bower_components, consiguiendo así tener las referencias en un solo archivo y los plugins externos en un solo directorio.
Referenciar los plugins en el html
A continuación, tal y como hicimos en el proyecto Cómo hacer un carrusel con Slick, vamos a crear un html de prueba, que referencie a JQuery y lo utilice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hola Mundo Bower con jQuery</title>
</head>
<body>
<h1>Hola Mundo con Bower y jQuery</h1>
<p>Pulsa <a href="javascript:;" onclick="$('#hola-mundo').fadeIn();" title="Mostrar Hola Mundo">aquí</a> y aparecerá "Hola Mundo"</p>
<div id="hola-mundo" style="display: none;">Hola Mundo</div>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
</body>
</html>
¿Qué viene después?
Con Bower hemos conseguido tener organizados nuestros plugins, y, con ello, evitar el caos que supone su gestión manual, además de facilitar la actualización de los mismos. Pero esto no es todo, ya que aún nos quedan más pasos para hacer nuestra web más óptima y el html más limpio. En posteriores entradas hablaremos de otras herramientas, tales como SASS o Gulp, que nos faciliten acercarnos a estos objetivos.
Clona el ejemplo
Puedes clonar el ejemplo que hemos visto desde su repositorio en mi cuenta de GitHub:
