CSS and JS files in Laravel

4

By default, the CSS and JS files in Laravel are in the public folder. But when I create the dependencies with Bower, it creates the components folder in the vendor folder.

Can I change the folder from vendor to public ?

    
asked by anonymous 24.08.2016 / 18:11

1 answer

3

Maybe the problem is in the folder you are installing. If you are inside the vendor folder of your project and run the bower install jquery command, it will install inside the vendor folder.

The correct structure of Laravel (if we are talking about Laravel 5), is this:

my_app/
  app
  bootstrap
  resources
  storage
  public
  vendor

So you should install with bower from the my_app folder.

So:

cd my_app

bower install jquery

You can also configure bower to install directly to the public folder.

See:

Complement

In my humble opinion, I suggest you use Laravel Elixir . It uses gulp to automate tasks, such as minification of assets, unification, and even compilation of less or coffescript .

Some sources:

With it, you could, for example, install multiple dependencies for your project, such as jQuery, jQuery-UI, and Bootstrap, and then compile the scripts for a single file. This is very useful!

Small example with Laravel Elixir

You can install some libraries via bower and use elixir . I recommend that you create the .bowerrc file to configure the directory where you will install the bower components.

Do something like:

{
  "directory" : "resources/assets"
}

I have used the resources/assets folder since this is where Laravel Elixir reads assets files to generate assets to run in production (for example, joined or mined).

Then you can run, for example, bower install jquery . The files will be installed in the resource/assets/jquery folder.

Now use elixir , within the gulpfile.js file, to be able to copy, version, minify or merge the files of your application. For example:

elixir(function (mix) {
    // 'scripts' aponta para resources/assets/js por padrão
    mix.scripts([
        "../jquery/dist/jquery.min.js",
        "../outra_library/lib.js"
    ], "public/js/vendor.js")
});

After this setting, you can run the command gulp , which will cause your files to be compiled to public/js/vendor.js . So you just have to include this file in your main template.

    
24.08.2016 / 18:25