Para construir um site, geralmente contamos com várias bibliotecas, seja na forma de CSS ou JavaScript. Se eu construísse um pequeno website que exibisse uma apresentação de slides, por exemplo, o website provavelmente precisaria de jQuery e um plugin jQuery, Flexslider. Estas bibliotecas são as dependências para o website funcionar.
Embora adicionar estas bibliotecas deva ser uma tarefa fácil, quando se trata de um website de grande escala que requer mais bibliotecas, tudo pode ser incómodo e confuso desde o início. Você pode ter que arrastar de um repositório para outro, baixar cada uma das bibliotecas, extrair os pacotes, e finalmente colocá-los no diretório do seu projeto.
Quando a nova versão ficar disponível você terá que estar fazendo tudo isso novamente (parece muito trabalho, certo?).
Recommended Reading: Animate.CSS – CSS3 Library To Create Animation Easily
Se isso soa como o que você vem fazendo há anos, este artigo pode valer a pena ser lido. Aqui vamos mostrar-lhe uma ferramenta útil chamada Bower que faz da gestão de bibliotecas de sites uma brisa. Vamos dar uma olhada.
Próximo Início
Para usar o Bower, você tem que instalar o Node.js. Como o Bower é baseado no Node.js, você deve ser capaz de executar o Bower em todas as plataformas: Windows, Mac e Linux.
Após ter instalado o Node.js, abra o Terminal (ou Prompt de Comando) e execute esta linha de comando para instalar o Bower.
npm install -g bower
Instalar Bibliotecas
Agora estamos prontos para usar o Bower. Vamos começar por procurar uma biblioteca que queremos colocar no nosso directório de projectos. Assumindo que você está atualmente dentro do diretório, você pode digitar bower search {name of the library}. Aqui, por exemplo, procurei por Normalize.css, uma biblioteca para tornar o estilo de um elemento consistente em todos os navegadores.
bower search normalize
O comando listará um monte de resultados; não apenas que ele nos dá o Normalize original, ele também nos mostra versões do Normalize que foram convertidas para LESS, Sass, Stylus e as outras plataformas.
Após termos escolhido qual deles instalar, podemos digitar bower install {{name of the repository}}. Neste exemplo, irei instalar Normalize LESS assim como jQuery.
bower install normalize-less jquery
Este comando irá baixar a última versão do normalize-less e jQuery, e salvá-la em uma nova pasta chamada bower_components; você deve agora encontrar a pasta criada no diretório do seu projeto.
Alternately, se você quiser instalar a versão antiga da biblioteca, você pode executar o comando seguido com o número da versão, desta forma.
bower install jquery#1.10.0
Agora temos as bibliotecas, Normalize e jQuery, em nosso diretório de projetos, podemos usá-las referenciando o jQuery da pasta bower_components no documento HTML e importar Normalize LESS na outra folha de estilo LESS.
em HTML
<script src="bower_components/jquery/jquery.min.js"></script>
em LESS
@import "bower_components/normalize-less/normalize.less";
Se uma das bibliotecas não for mais usada no site, você pode desinstalá-la facilmente com o comando bower uninstall, assim.
bower uninstall normalize-less
Updating The Bower Components
Vamos dizer que você está trabalhando no seu projeto há vários meses, e algumas bibliotecas que você está usando (como jQuery) lançaram uma nova versão. Nesta circunstância, podemos usar o Bower para actualizar o jQuery para a versão mais recente. Mas primeiro vamos verificar se a nova versão foi registrada no Bower com bower list comando.
A última versão do jQuery, como você pode ver abaixo, é 2.1.1.
Para atualizar o jQuery, podemos digitar bower update jquery. Uma vez concluída a atualização, você pode executar novamente o comando bower list para verificar a versão instalada atual. Abaixo, como você pode ver, temos agora a última versão do jQuery.
Wrap Up
Bower é uma ferramenta muito útil que eu acho que você deve aproveitar no seu projeto. É como ter uma AppStore, mas para o seu site – podemos instalar, atualizar e remover bibliotecas convenientemente.
No próximo artigo vamos mergulhar no Bower e explorar algumas funcionalidades mais avançadas. Então fique atento.
