Bower by Twitter – um gerenciador de pacotes para Web

Neste artigo vamos apresentar o Bower, que é um gerenciador de pacotes para web, utilizado para gerenciar qualquer repositório Git em um projeto Web.

Neste artigo vamos apresentar o Bower, que é simplesmente um gerenciador de pacotes para web, via linha de comando, utilizado para gerenciar qualquer repositório Git dentro de um projeto publico ou privado.

Introdução

O Bower é uma ferramenta desenvolvida pelos engenheiros do Twitter a fim de simplificar e agilizar o modo como gerenciamos os pacotes de um projeto.

Imagine que estamos trabalhando em um projeto com um Framework (disponível em repositório Git) no momento na versão 0.0.1, e então este Framework é atualizado para a versão 0.0.2. No caso seria necessário atualizar os repositórios do Framework para que continuemos a trabalhar com uma versão estável e atual. Em um projeto simples, seria necessário se dirigir a página do Framework e baixar sua nova versão com os arquivos atualizados e substituir na pasta onde se encontram os mesmos arquivos. É justamente isso que o Bower faz por você através da linha de comando (cmd no windows, terminal nos demais sistemas).

Além de prover os repositórios necessários para iniciar um projeto, sem perder tempo e o foco por não precisar se direcionar até o site referente a cada, você pode pré configurar um padrão (através do arquivo bower.json e .bowerrc) para seus projetos e sempre que precisar iniciar um novo projeto, basta executar um comando para o Bower trazer os repositórios necessários.

Vamos iniciar então os testes com o Bower 🙂

IMPORTANTE: PROCEDIMENTOS BASEADOS NO SISTEMA OPERACIONAL WINDOWS, TESTADOS E APROVADOS NO WINDOWS XP E WINDOWS 7/8

Instalação

Primeiramente, para utilizarmos o Bower, precisamos ter instalado no equipamento o Node.js com NPM (gerenciador de pacote globais para o node) e o Git for Windows, feito isso estamos aptos para instalar o Bower.

Instalação do Node.JS

Siga as etapas abaixo para instalar o Node.JS e o gerenciador de pacotes NPM.

  1. Baixe o arquivo de instalação do node no link: http://nodejs.org/
  2. Após efetuar a instalação do Node, abra o prompt de comando baseado no Node, que fica na pasta de instalação do mesmo.
  3. Com o prompt aberto, vamos confirmar se o NPM está configurado através do comando: npm –v [ se tudo estiver OK, o prompt vai apresentar a informação da versão instalada, o NPM ja vem instalado por padrão no Node ]
  4. Agora devemos instalar o Git for Windows na maquina.

Instalação do Git for Windows

  1. Acesse o site do Git no link: http://git-scm.com/
  2. Na página inicial do Git já é apresentado um botão para instalação do Software conforme a imagem:
    Instalação do Git para Windows
  3. Durante a instalação, o assistente vai questionar como você deseja utilizar o Git, seleciona a opção conforme a imagem:
    Instalação do Git para Windows
  4. Finalizada a instalação do Git, podemos iniciar a instalação do Bower.

Instalando o Bower

Com os softwares necessários configurados, podemos instalar o Bower no equipamento.

  1. Abra o prompt de comando do Node e execute o seguinte comando: npm install -g bower (o parametro -g é utilizado para instalar o pacote globalmente nos repositórios do Node).
    Gif de instalação do Bower
  2. Após o processo acima, para confirmar se o Bower foi realmente instalado, execute o seguinte comando para confirmar qual a versão presente do Bower: bower –v

 Utilizando o Bower para gerenciar pacotes

Imagine que vamos começar um projeto agora chamado teste_bower, e estamos com a equipe de desenvolvimento reunida para analisar quais ferramentas vamos utilizar no projeto em questão. Imaginemos que vamos utilizar o RequireJS com o Framework CSS Foundation. Com isso pré definido, vamos dar inicio ao projeto.

Criei uma pasta para o projeto no caminho: c:/users/thierry/web/teste_bower – a pasta foi criada na raiz do meu usuário pra facilitar a ida a mesma através do prompt.

Com a pasta criada, execute o seguinte comando no promt do Git ou do Node: bower init

O Bower vai solicitar alguns dados para iniciar o projeto, basta entrar com as informações conforme solicitado, não vamos preencher todas as informações pois estamos efetuando apenas um teste mas em um projeto real é natural ter todos os campos solicitado preenchidos para uma documentação completa e abrangente. O processo é o mesmo do gif abaixo:

Gif de instalação do Bower

Obs: não se esqueça de apontar a pasta do seu projeto para o prompt, se não o mesmo vai baixar pacotes e criar pastas na raiz do seu usuário.

Feito isso, será criado um arquivo na pasta do seu projeto, chamado bower.json, no seguinte padrão:

{
"name": "testando bower",
"version": "0.0.0",
"description": "testando bower",
"main": "index.html",
"authors": [
"thierry"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

Nesse arquivo você pode editar a qualquer momento qualquer parâmetro de informação sobre o projeto. Mas não é só isso, nesse arquivo também podemos pré configurar quais ferramentas vamos utilizar para desenvolver o projeto editando o arquivo dessa maneira:

{
"name": "testando bower",
"version": "0.0.0",
"description": "testando bower",
"main": "index.html",
"authors": [
"thierry"
],

"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],

"dependencies": {
"foundation": "latest",
"requirejs": "latest"
}
}

Dessa maneira estamos pré definindo no arquivo de informações do projeto quais as dependências do mesmo, ou seja, que ferramentas vamos utilizar para desenvolver o projeto.

Temos outro arquivo que auxilia nas pré definições do projeto. Crie um arquivo de nome .bowerrc com as seguintes linhas:

{
	"directory": "libs",
	"json": "bower.json"
}

A primeira linha define o nome da pasta que vai agrupar os pacotes dentro da pasta do projeto, no caso a pasta vai se chamar libs. A segunda linha aponta o arquivo de informações do projeto.

Feito isso, vamos para a melhor parte que é propriamente gerenciar os pacotes que serão utilizados no projeto, instalando os pacotes em questão com o comando: bower install  – esse comando deve ser utilizando no prompt do Git

Gif de instalação do Bower

Esse comando vai ver o que está descrito no seu arquivo bower.json e se houver alguma dependência (no nosso caso o pacote do Foundation e do requireJS), ele vai baixar criando a pasta libs com os pacotes em questão.

Note que o Bower inclusive baixou pacotes necessários para a utilização dos pacotes que você solicitou para que não haja nenhum problema na utilização dos pacotes, o Modernizr e o Jquery são um exemplo, utilizado pelo Foundation.

Comandos básicos do Bower

Caso você precise atualizar os pacotes presentes em seu projeto, basta executar na pasta do seu projeto o comando: bower update

Para deletar algum pacote, basta inserir o comando: bower uninstall NOME DO PACOTE

Para instalar algum novo pacote, insira o comando: bower install NOME DO PACOTE

Para pesquisar um pacote, insira o comando: bower search PALAVRA OU NOME DO PACOTE

Esses são os comandos mais utilizados no Bower, o mais interessante é que você pode realmente gerenciar os pacotes sem precisar se dirigir ao site dos desenvolvedores de forma organizada e de fácil entendimento, o que economiza tempo e padroniza a arquitetura de seus projetos.

Para finalizar o exemplo de utilização do Bower, basta criar um arquivo HTML e linkar os pacotes em questão para testar a funcionalidade dos mesmos.

Uma dica para aumentar sua produtividade é deixar pronto arquivos padrões do bower (bower.json e .bowerrc), assim toda vez que você precisar iniciar um projeto, basta editar os arquivos em questão para informar que pacotes vão ser usados no projeto.

Tentei exemplificar o máximo possível o tutorial, pois não encontrei nenhum manual muito amplo em português quando decidi aprender a utilizar o Bower, portanto se houver dúvidas, estou inteiramente a disposição através dos comentários ou do Google+.

🙂