23 noviembre, 2019

Primeros pasos con Bower (2 de 2)

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«.

Bower init en la consola de comandos.
Bower init

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:

Bower init en la consola de comandos.
Bower jQuery

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:

https://github.com/diegorys/bower_hola_mundo.git

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies