Como Preparar o Bower Para Seu Próximo Projeto

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Pela série, nós descobrimos o Bower e como ele pode aprimorar nosso processo de desenvolvimento para WordPress. Para encerrar, veremos como preparar o Bower para seu próximo projeto. Especificamente, trateremos da instalação, atualização e customização de vários componentes.

Nos posts anteriores, falei sobre o que o Bower é e como ele pode ajudar em seu processo de desenvolvimento para WordPress. Nesse post, aprenderemos como preparar o Bower para seu projeto e algumas técnicas avançadas também.

Alguns conceitos são similares aos do Grunt, então, sugiro que você dê uma olhada no post anterior, Preparando o Grunt Para o Seu Próximo Projeto. Nós, finalmente, começaremos a codificar algo. Vamos lá!

bower.json

A chave para o Bower em um projeto, é o arquivo bower.json. Ele será analisado durante a execução do comando bower install, tanto para seu projeto quanto dos projetos que usem seu projeto. Ele também é necessário para guardar suas dependências, mas falaremos sobre isso mais à frente.

A primeira coisa que faremos é criar o arquivo bower.json no diretório raiz do projeto. Sugiro começar, pelo menos, com o nome, descrição e versão do projeto.

Eis o ponto inicial do nosso projeto:

{
  "name": "tuts-bower",
  "description": "Projeto exemplo para tutorial sobre Bower no Tuts+",
  "version": "1.0.0"
}

Instalando Dependências

Agora que nós temos um arquivo bower.json, vamos adicionar o Bootstrap ao nosso projeto. Nós faremos isso indo até a linha de comando e digitando bower install bootstrap-sass-official --save. Isso deverá criar um diretório bower_components com um diretório bootstrap-sass-official dentro dele, além de uma versão atualizada do nosso arquivo bower.json.

Eis o que nós encontraremos, agora:

{
  "name": "tuts-bower",
  "description": "Projeto exemplo para tutorial sobre Bower no Tuts+",
  "version": "1.0.0"
  "dependencies": {
    "bootstrap-sass-official": "~3.1.1"
  }
}

Você perceberá que a dependência foi baixada e há uma referência a bootstrap-sass-official juntamente ao número da versão mais atual.

Atualizando Componentes

Um dos meus recursos favoritos do Bower é o quão fácil é de atualizar os componentes que usamos em um projeto. Para aqueles que me conhecem, eu sou aquele que sempre usa a versão mais atualizada de qualquer biblioteca em meus projetos. Tão logo uma nova versão do Bootstrap sai, eu atualizo. O Bower torna isso muito fácil de fazer.

No exemplo acima, o til ~ na frente da número da versão, simplesmente, indica para usar a versão mais atual de um componente. Ele também permite atualizar seu projeto com qualquer nova versão que tiver, quando executar bower update. Por exemplo, quando o Bootstrap atualizar para a versão 3.2.1, você pode, simplesmente, executar bower update e você obterá a versão atualizada.

Há inúmeras maneiras diferentes que você pode usar para especificar quais versões de cada componente você pode usar.

Versão Específica - 3.1.1
Somente Versões de Ajuste - ~3.1.1
Versões Menores - ^3.1.1
Versões Mais Atualizadas - *
Veja a Lista Completa

Usando Componentes

Agora que temos o Bootstrap instalado, vamos inserí-la em nosso projeto. Para o exemplo desse post, vou adicionar somente as folhas de estilo ao projeto, não o JavaScript ou fontes. Porém, incluirei eles num projeto completo no GitHub.

A primeira coisa que queremos fazer é criar um arquivo style.scss que será gerará nosso arquivo style.css, na raiz do nosso projeto, após ser compilado. Geralmente, crio uma estrutura de diretórios parecida com css/sass/ e coloco todos os meus arquivos .scss dentro da pasta sass. Vamos em frente e criar nosso arquivo style.scss lá.

Uma vez que estamos criando um tema, precisamos adicionar alguns comentários no topo do arquivo, e, então, poderemos importar o arquivo bootstrap.scss que baixamos através do Bower. Você precisará descobrir o caminho para ele, daí, então, usar o @import para importá-lo:

/*!
Theme Name: Tuts+ Bower
Theme URI: http://code.tutsplus.com/
Version: 1.0.0
Description: Projeto exemplo para o tutorial sobre Bower no Tuts+
Author: Jason Bradley
Author URI: http://jasonbradley.me
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

// Importando as Folhas de Estilo do Bootstrap
@import '../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

Usarei o grunt-contrib-sass nesse projeto exemplo, e, quando executarmos nosso compilador de Sass, ele compilará o arquivo bootstrap.scss e incluirá em nosso arquivo style.css. Agora, temos todos os arquivos do Bootstrap adicionados ao nosso projeto.

Customizando Componentes

Há duas maneiras de customizar esses componentes: Focarei no CSS. Uma forma é sobrescrever os estilos com outra folha de estilo, importando mais ao final do seu arquivo style.scss. Outra maneira, que eu recomendo, é sobrescrever os arquivos .scss existentes e adicioná-los com o Bower.

Vejamos o arquivo bootstrap.scssque referenciei na seção anterior. Ela está, essencialmente, importando os outros arquivos .scss que ela precisa compilar. Se você olhar os arquivos e a ordem a qual as coisas são importadas, você deve encontrar o arquivo variables.scss bem no topo. Enquanto projeto, o Bootstrap tem feito um ótimo trabalho ao extrair estilos reutilizáveis ou comumente reescritos, como cores e tamanhos de fontes.

O que podemos fazer é copiar o arquivo bootstrap.scss e adicioná-lo como um de nossos arquivos .scss do nosso tema, dentro do diretório css/sass. Uma vez que fizermos isso, nós temos de mudar o caminho para todos os arquivos que ele importa, para apontar para nosso diretório bower_components.

Nós também podemos adicionar nossos próprios arquivos .scss dentro desse arquivo e sobrescrever as coisas, como as variáveis sass em variables.scss. Digamos que queremos atualizar a cor de fundo. Há uma variável dentro do arquivo variables.scss do Bootstrap, chamada de $body-bg, que nós podemos, simplesmente, sobrescreve-la, através de um arquivo variables.scss em nosso tema.

Ambos os exemplos acima seriam alterados disso:

// Variáveis base e mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

para isso:

// Variáveis base e mixins
@import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/variables";
// Sobrescrevendo as variáveis padrão do Bootstrap
@import "variables";
@import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/mixins";

Isso é um ponto um pouco mais complicado de explicar sem uma demonstração concreta, então, coloquei um projeto exemplo no GitHub para que você possa dar uma olhada.

Conclusão

Esse arigo conclui nossa série sobre Bower. Nós falamos sobre o que o Bower é, como ele pode ajudar nosso processo de desenvolvimento para WordPress e, hoje, falamos sobre como prepará-lo para seu projeto.

O Bower se tornou o administrador de dependência mais famoso, então, espero que essa série tenha ajudado você a entender os conceitos e como utiliza-lo em seus próprios projetos.

Recursos

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!