Utilize Bower em seus projetos

Web sites e sistemas WEB em geral, utilizam na maioria das vezes alguns frameworks, bibliotecas, utilitários entro outros componentes. O Bower administra tudo isso para você. Pense bem, em vez de ter que entrar no site de cada framework que você quer usar e baixar os arquivos necessários, você pode automatizar este processo através do bower.


O que e o bower?

Bower é um sistema de gerenciamento de pacotes voltado para o front-end. Ele foi inicialmente desenvolvido no Twitter por Jacob Thornton, co-criador do Bootstrap quadro, que ajudou Bower ganhar rapidamente adoção.


Instalação

Nota:
  • Para instalar o bower e necessário ter instalado as seguintes dependências:
  • NodeJS
  • NPM
  • Git

Execute o seguinte comando em seu terminal:

npm install bower -g

O parâmetro -g, e para que a instalação fique global, podendo assim ser utilizada, em qualquer projeto dentro do seu sistema operacional.


Configurando o projeto

Bem, vamos começar a entender como o bower funciona na pratica, primeiramente temos que inicializar o bower dentro do diretório do nosso projeto, pra isso no terminal executamos o seguinte comando.

bower init

Bem parecido com o comando do git né, após executar o comando o bower ira fazer algumas perguntas, como nome do projeto, descrição, licença entre outras, Para ignorar algumas perguntas basta apertar enter, que o bower seta as opção default para o projeto. Veja que o bower, criar um arquivo chamado bower.json na raiz do diretório onde o comando foi executado, veja a estrutura do arquivo bower.json após o comando.

{
name: 'bower',
authors: [
'Frederico Ferreira <frederico@ufti.com.br>'
],
description: '',
main: '',
license: 'MIT',
homepage: '',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}

Até o momento tranquilo né. Então agora vamos começar a baixar alguns dependências para que você possa entender melhor, como o bower pode ajudar o nosso projeto.


Instalando as Dependências

Iremos baixar as dependências do nosso projeto, neste exemplo irei baixar o bootswatch que nada mais é do que temas pré-definidos feitos em bootstrap, então irei executar o seguinte comando.

bower install bootswatch --save

A opção --save serve para adicionar o componente no “dependencies” do “bower.json”, após a instalação do pacote, o bower automaticamente cria uma pasta chamada de bower_components onde se encontra todas as dependências que foram baixadas para o projeto, repare que dentro desta pasta temos mais 3 pastas sendo elas:

Bootstrap -> Contém todos os arquivos css e js do bootstrap. Bootswatch -> Contém varios temas pré-definidos feitos em bootstrap. Jquery -> Toda a lib do framework jquery.

Veja que o bower baixou além do bootswatch que foi o pacote que solicitamos, também baixou o bootstrap e o jquery, mas porque isso aconteceu? E porque o Bootswatch depende do bootstrap e o bootstrap depende do jquery para funcionar e o bower cuida de todas as sub-dependências também, legal né. Para importar as bibliotecas para o no nosso projeto é o mesmo “arroz com feijão”, só adicionar a tag script no html:

<link rel="stylesheet" type="text/css" href="bower_components/bootswatch/cosmo/bootstrap.min.css"/>
<script src="bower_components/jquery/jquery.min.js">
<script src="bower_components/dist/js/bootstrap.min">
Nota:
  • Por padrão, o diretório que o bower utiliza pra salvar os componentes instalados é “bower_components/”, caso você queira modificar, basta criar um arquivo chamado “.bowerrc” com o seguinte conteúdo:
{
"directory":"nome do diretório que deseja salvar"
}

Agora veja como ficou o nosso arquivo bower.json

{
"name": "bower",
"authors": [
"Frederico Ferreira <frederico@ufti.com.brr>"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootswatch": "^3.3.6+1"
}
}

Repare que foi adicionado a dependência do Bootswtach, O arquivo bower.json também pode ser modificado manualmente, ou seja você pode adicionar as dependências do projeto manualmente e depois rodar o comando bower install que o bower automaticamente vai ler o bower.json baixar todas as dependências descritas no arquivo. O mesmo comando serve também para quando você baixar algum projeto no github por exemplo que utiliza o bower e precisa instalar as dependências para funcionar.

Outros comandos

Para buscar, instalar, atualizar, listar, e desinstalar um novo pacote usamos os comandos abaixo:

bower search <nome do pacote>

bower install <nome do pacote>

bower update <nome do pacote>

bower list <nome do pacote>

bower uninstall <nome do pacote>

Dentro do arquivo bower.json ou no terminal quando realizar a instalação de algum pacote, você pode especificar diversos valores como versão seguido de um # por exemplo bower install angular#1.5.5 e outros parâmetros como:

bower install <Uma tag do Git>

bower install <Um hash de commit do Git>

bower install <Um branch do Git>

bower install <Uma URL>

bower install

Dicas

Outra forma de visualizar os componentes registrados no bower de maneira mais agradável é através do site: http://bower.io/search/.

Outra dica é, não versione a pasta que vc estiver utilizando pra salvar os componentes gerenciados pelo bower, se a sua pasta for a padrão(“bower_components/”), coloque no seu .gitignore, assim você deixa seu repositório mais leve e evita conflitos de libs que foram adicionadas por diferentes desenvolvedores.

Bom, este e um simples artigo para que você já possa começar a utilizar o bower em seus projetos e verificar as facilidades que o bower propõe pra nós desenvolvedores.Até a próxima pessoal.

Show your support

Clapping shows how much you appreciated Frederico Ferreira’s story.