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:
- laravel new projeto ( Criando uma instalação do zero)
- npm install (isso ira instalar o elixir com suas dependencias)
- bower init (preencha as informações, esse comando ira criar o bower.json)
- 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