Guia de Iniciantes: Começando com o Bower Package Manager

Bower é um gerenciador de pacotes front-end construído pelo Twitter. Também conhecido como gerenciador de pacotes para a Web, o bower é usado em projetos modernos de código aberto e código fechado para resolver muitos problemas recorrentes.

Este artigo irá guiá-lo através do uso básico do bower e uso avançado para um ambiente de equipe. Também vou compartilhar meu fluxo de trabalho pessoal ao lidar com o bower com uma equipe de desenvolvedores.

Problemas que o bower resolve

Desenvolver um website ou aplicação web hoje em dia requer o uso de muitos frameworks front-end, tais como Bootstrap, jQuery, Angular, etc.

1. Baixar cada um desses pacotes requer navegar no website correspondente, encontrar a versão apropriada, baixá-la, descompactar e finalmente mover os arquivos principais para a pasta do fornecedor. (ex.: o arquivo main no pacote jquery é jquery.js)
2. Após ter os arquivos baixados em seu repositório, você tem que visitar manualmente todos os websites acima (jquery.com, angularjs.com, bootstrap.com) para checar por atualizações e adivinhe o que? Se houver uma atualização, você tem que repetir o passo 1 para cada pacote/update.
3. Let’s assume que vamos usar o Bootstrap que requer jQuery (chamado dependência). Quando você for ao getbootstrap.com para baixá-lo, você terá que navegar até jquery.com para baixar jquery também.

Em resumo, bower ajuda você a gerenciar seus pacotes front-end. Ele ajuda você a baixá-los, atualizá-los e resolver suas dependências.

Existem outros benefícios de usar bower que discutiremos mais adiante neste artigo, mas estes são os principais problemas que o bower está resolvendo para nós!

Instalação e utilização

Instalação do bower

Bower é um módulo de nó, e pode ser instalado com o seguinte comando:

npm install -g bower

Esta instalação do bower será global no seu sistema.

Se você não tiver o nó instalado no seu computador, você tem que baixá-lo de nodejs.org.

Instalando pacotes

Para o bem deste tutorial, vamos usar o bower para instalar o bootstrap. O processo funcionará para qualquer outro pacote.

bower install bootstrap

Isto irá instalar o bootstrap na pasta recém-criada /bower_components (ao nível da raiz).

Nota que isto irá instalar o bootstrap 3.2.x que é a última versão no momento de escrever este artigo. Se queremos instalar a última versão em 2.x, precisamos executar:

bower install bootstrap#2

também podemos especificar a versão exata com

bower install bootstrap#2.2

Notem que como o bootstrap depende do jQuery, executando qualquer um dos comandos anteriores também instalará automaticamente o jQuery, para resolver as dependências do bootstrap.

Atualizando pacotes

Se quisermos atualizar todos os nossos pacotes, só precisamos executar o seguinte comando:

bower update

Incluindo scripts

O último passo seria incluir os estilos e scripts baixados. Como todos eles residem dentro da pasta /bower_components, teremos que escrever o seguinte:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Fluxo de trabalho comum em um ambiente de equipe

Após usar o bower da forma minimalista acima, percebemos que ele introduz novos problemas quando se trabalha com controle de código fonte e/ou em um ambiente de equipe.

1. Bower não só baixa os arquivos da distribuição principal, mas também baixa todo o repositório de jquery, bootstrap, etc. Isto pode inchar seu histórico de controle de revisão e não é totalmente recomendado.
2. Tanto os arquivos de distribuição principal (dist/jquery.js, dist/css/bootstrap.css) não são minificados, e o bower nunca irá minificar os arquivos de distribuição porque é um gerenciador de pacotes, não uma ferramenta de compilação.
3. Você tem que ter certeza manualmente de carregar o jquery antes de carregar o bootstrap (porque o bootstrap tem o jquery como uma dependência).
4. Você tem que adicionar manualmente um novo <script> tag para cada novo pacote (e talvez um novo <link rel=”stylesheet”/> se ele contém arquivos css.

Passo 1: Instale bower

e certifique-se que cada pessoa da sua equipa o instala também globalmente.

Passo 2: Exclua bower_components do controlo de revisão

Adicionar bower_components ao seu .gitignore. Isto irá instruir o Git a ignorar todo o ficheiro bower_components. Dessa forma cada desenvolvedor (em uma equipe) terá uma cópia local das bibliotecas front-end necessárias. Não se preocupe com o fato de cada desenvolvedor ter uma versão diferente. Vamos corrigir isso em algumas.

Passo 3: Instale os pacotes requeridos

Instale os pacotes front-end requeridos, digamos jQuery e bootstrap.

bower install jquery#1 bootstrap --save

A bandeira --save instruirá o bower a criar (se não existir) um arquivo bower.json e incluir os pacotes instalados nele. Este é um exemplo do gerado bower.json file:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

notar como existe uma restrição de versão ~3.2.0. Isto irá assegurar que todos os membros da equipe estarão trabalhando na mesma versão do bootstrap, til significa que a razão deve estar razoavelmente próxima da razão especificada.

Passo 4: Membros da equipe podem agora rodar: bower install

Quando qualquer desenvolvedor que tenha acesso ao repositório roda bower install, ele instala todas as dependências (bootstrap e jquery neste caso).

Para os demais passos, precisamos do Grunt ou Gulp.

Passo 5: Integrar com ferramentas de compilação

Grunt e Gulp são ferramentas de compilação, usadas para automatizar tarefas comuns e recorrentes, tais como minicar scripts, otimizar imagens, minicar folhas de estilo, compilar menos/assuntos/stylus. Bower joga bem com Grunt/Gulp por causa dos plugins prontos. Neste tutorial eu vou cobrir Grunt, no entanto você vai encontrar uma alternativa similar para Gulp.

Grunt tem um plugin chamado grunt-bower-concat que compila todos os arquivos principais para cada componente do bower que você tem em um arquivo bower.js. O qual você pode então usar Grunt para minify (uglify), resultando em bower.min.js.

Grunt bower concat configuração de amostra:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Note: se você estiver usando Gulp, um plugin similar existe em: https://github.com/ck86/main-bower-files/

Nota: Para Ruby on Rails e outros, verifique o seguinte link: http://bower.io/docs/tools/

Passo 6: Incluir scripts

Com os seguintes scripts, você inclui seus scripts uma vez e sempre que você adicionar um novo pacote front-end, ele será automaticamente concatenado no arquivo correspondente (bower.css ou bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Passo 7: Mais automação do bower

Você pode automatizar ainda mais o bower. Digamos que você está trabalhando em equipe e você adiciona um novo componente do caça-níqueis (bower install typeahead.js). Você não quer mandar um e-mail para todos dizendo para executar bower install. Podemos automatizá-lo com grunt-watch e grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

O que está acontecendo aqui, é que sempre que você editar o arquivo bower.json, o grunt executa automaticamente o comando bower install. Quando você submete suas alterações, e seu colega de trabalho puxa seu código, o grunt-watch detectará uma alteração em bower.json que então executará automaticamente o comando bower install>

Como eu personalizo o bower no meu próprio fluxo de trabalho

Quando se trata de gerenciadores de pacotes, eu uso muitos deles no meu fluxo de trabalho. Eu uso npm para gerenciar o grunt e seus plugins. Composer para gerenciar minhas bibliotecas de fornecedores de PHP, bower para gerenciar meus pacotes front-end e finalmente ruby gems para gerenciar Capistrano (um pacote que é usado para automatizar implementações).

Decidi que quero que o npm seja o gerenciador de pacotes main. Então eu comecei a empacotar todos os comandos principais dentro da minha seção de scripts de package.json. Por exemplo:

• npm run migrate: migra a base de dados e gera arquivos de migração (específico para PHP)
• npm test: executa testes unitários
• npm run protractor: executa testes finais
• npm run deploy-staging: carrega código para máquinas de encenação
• npm run deploy-production: carrega código para máquinas de produção
• npm start: corre npm install (pré-arranque), bower update (pós-instalação) e finalmente grunt

: eis o que está a acontecer nos bastidores. Considere o seguinte package.json file:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Se você olhar a seção de scripts, você verá que prestart: nós executamos npm install. Como o package.json está incluído em nosso repositório, se alguém adiciona uma nova devDependência, nós precisamos ser capazes de instalar a mesma versão facilmente. (Note que o pré-início é o primeiro comando acionado quando você executa npm start).

post install (que é acionado por npm install), executa o seguinte comando: bower update --unsafe-perm(o --unsafe-perm só foi adicionado porque o bower-update estava falhando em um Mac). Isto irá manter todos os nossos pacotes front-end atualizados.

start: e finalmente o comando start roda grunt.

Com esta configuração, sempre que qualquer desenvolvedor da sua equipe quer começar a trabalhar no projeto, ele simplesmente navega para o diretório do projeto e executa npm start para começar a trabalhar imediatamente.

Usar esta abordagem é muito eficaz porque você pode incluir outros scripts para executar a partir de npm, como npm run migrate, npm run deploy-staging, etc.

Usando esta abordagem, nós não estamos apenas encorajando o uso da linha de comando e automação, nós estamos realmente tornando-a uniforme.

Você pode ver que nós ligamos npm install com bower update. Você pode levar isso um passo adiante e vincular todos os seus outros gerentes de pacotes com npm install. Neste caso, rodando npm install executaria todos os seguintes comandos:

• bower update
• composer update --no-dev
• gem update

Embrulhando-o

Bower é uma ferramenta incrível que resolve problemas fundamentais com as aplicações web modernas. Todas as pessoas são encorajadas a usá-la (e até mesmo o novo Visual Studio é enviado com Bower e Grunt/Gulp atualmente).

Pode ser facilmente configurado quando estiver desenvolvendo sozinho, no entanto, se você estiver trabalhando em equipe, você precisa seguir os passos apresentados neste artigo para garantir um fluxo de trabalho suave entre todos os desenvolvedores da equipe.