Laravel 5 + Bower

Published 2 years ago by aviel_n

Hey all! I've been watching the series about laravel + elixir + bower in the lessons section. i still can't figure out something: bower installs everything to: resources\assets\bower.

is there some kind of automatic way to copy the js and css lets say from installation of jquery? i saw in a glitch in the tutorial that he uses gulp and elixir to copy specific files. is there another convenient way??

usman
usman
2 years ago (128,765 XP)

@aviel_n bower by default installs its components inside the current working directory, for instance if you run bower install bootstrap.. it will create a folder bower_components inside your current working directory and the bootstrap sources will be saved inside this directory. you can change the default directory by creating a .bowerrc file inside the root of your laravel installation:

    {
    "directory": "resources/assets/bower"
    }

Now running the bower install from the root of laravel installation will always save the components inside the resources/assets/bower directory.

aviel_n

@usman thanks for your reply! but the resources folder is not accessible (it not in the public folder). so how can i link to it in my site?

usman
usman
2 years ago (128,765 XP)

@aviel_n if you are reluctant to use elixir then change the path to public instead:

    {
    "directory": "public/assets/bower"
    }

Usman.

aviel_n

@usman the other option is to user elixir to copy them, right?

usman
usman
2 years ago (128,765 XP)

@aviel_n I would recommend you to use elixir it is just awesome... you can use this script as starting point:

var elixir = require('laravel-elixir');

var bowerDir = './resources/assets/bower/';

elixir(function(mix) {
    mix.scripts([
            'jquery/dist/jquery.min.js',
            'bootstrap/dist/js/bootstrap.min.js'
            ], 'public/js/all.js', bowerDir);

});

The above script will combine the jquery.min.js and bootstrap.min.js and the output will be placed inside the public/js directory as all.js file. The path to bower assets depends on my initial solution. Alternatively you can use the copy command to copy individual scripts.

Usman.

aviel_n

@usman i will give it a go. thanks. i see you use require synthax. do you use it with require. js or browserrify?

cheers

morgan.davison@gmail.com

This worked for me:

elixir(function(mix) {
    mix.scripts([
        '../../bower_components/jquery/dist/jquery.min.js'
    ]);
});

So bower_components is in the root laravel installation but you can still refer to it with a relative path.

Please sign in or create an account to participate in this conversation.