Laravel Brasil

Laravel 5.1 como instalar o bootstrap usando bower

Ola pessoal

Com o lançamento da nova versão do laravel 5.1, muitos estão sentindo falta do bootstrap que ja vinha embutido antes nas versões anteriores, vou explicar a forma que eu faço para instalar o bootstrap e como configurar ele para ser compilado usando less do elixir.

vou partir do ponto que voce ja tenha instalado em sua maquina o nodejs/npm, bower, git, mas caso voce ainda não tenha, vou deixar uns links de ajuda no final do tópico.

Crie um arquivo chamado .bowerrc com esse conteudo :


{
 "directory": "vendor/bower_components"
}

no terminal digite os comandos:

  1. laravel new projeto  ( Criando uma instalação do zero) 
  2. npm install    (isso ira instalar o elixir com suas dependencias)
  3. bower init     (preencha as informações, esse comando ira criar o bower.json)
  4. bower install bootstrap –save (esse comando ira instalar o bootstrap e adicionar a dependencia dele no bower.json)

deixe o arquivo resources/assets/less/app.less com o conteudo abaixo:


@import "vendor/bower_components/bootstrap/less/bootstrap.less";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
font-weight: 300;
}

edite tambem o arquivo gulpfile.js


var elixir = require('laravel-elixir');</pre>
var bowerDir = 'vendor/bower_components/';

elixir(function(mix) {
 mix.copy(bowerDir + 'bootstrap/fonts', 'public/fonts')

 .copy(bowerDir + 'jquery/dist/jquery.min.js', 'public/js/jquery.min.js')
 .copy(bowerDir + 'bootstrap/dist/js/bootstrap.min.js', 'public/js/bootstrap.min.js')

 .less('app.less');
});

para finalizar digite o comando: gulp –prodution

o gulpfile.js é auto explicativo, voce ira perceber que ele esta copiando os arquivos para pasta public do projeto
e o mix.less() compila tudo para gerar o public/css/app.css

mais detalhes sobre esse assunto:

http://laravel-docs.artesaos.org/docs/master/elixir
http://tableless.com.br/bower-na-pratica/
http://www.carvalhoweb.com/articles/bower-guia-definitivo/

Powered by WPeMatico