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.scss
que 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
- Bower
- Grunt
- Setting Up Grunt For Your Next Project
- Bootstrap
- Semantic Versioner Ranges
- grunt-contrib-sass
- GitHub Example
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post