микрозаймы онлайн займы на карту займы по паспорту

Laravel 5.1 como instalar o bootstrap usando bower 4

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/

  • Anderson Machado

    OBS : Esta sendo feito num servidor dedicado com o nodejs instalado.

    node -v
    v0.10.40

    npm -v
    1.4.28

    ————————-

    /dev# cd /home/empresa/sites/dev/

    [email protected]:/home/empresa/sites/dev# vi .bowerrc

    {

    “directory”: “vendor/bower_components”

    }

    [email protected]:/home/empresa/sites/dev# cd /home/empresa/sites/dev/

    [email protected]:/home/empresa/sites/dev# sudo npm install

    npm WARN optional dep failed, continuing [email protected]

    > [email protected] install /home/empresa/sites/dev/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass

    > node scripts/install.js

    Binary downloaded and installed at /home/empresa/sites/dev/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-11/binding.node

    > [email protected] postinstall /home/empresa/sites/dev/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass

    > node scripts/build.js

    ` /home/empresa/sites/dev/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-11/binding.node ` exists.

    testing binary.

    Binary is fine; exiting.

    npm ERR! EEXIST, open ‘/root/.npm/289905d8-pm-source-map-0-1-43-package-tgz.lock’

    File exists: /root/.npm/289905d8-pm-source-map-0-1-43-package-tgz.lock

    Move it away, and try again.

    npm ERR! System Linux 3.16.0-4-amd64

    npm ERR! command “/usr/bin/node” “/usr/bin/npm” “install”

    npm ERR! cwd /home/empresa/sites/dev

    npm ERR! node -v v0.10.38

    npm ERR! npm -v 1.4.28

    npm ERR! path /root/.npm/289905d8-pm-source-map-0-1-43-package-tgz.lock

    npm ERR! code EEXIST

    npm ERR! errno 47

    npm ERR! not ok code 0

    [email protected]:/home/empresa/sites/dev#

    • Fabyo

      é problema na formatação do wordpress, quando edita o topico aparece certo com — (2 traços) mas quando salva fica 1

  • Esdras Camilo

    Na edição do arquivo gulpfile.js apresenta erro na sintaxe “”, quando executei o comando “gulp -prodution” ele apontou esse erro. seria correto tirar esse termo para executar?

    • Esdras Camilo

      o wordpress apagou a sintaxe “, seria essa. Mas fiz o teste sem e deu tudo certo.