CSS and JS files in Laravel

Asked

Viewed 1,467 times

4

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

I can change the vendor for public?

laravel bower

  • It is wrong. The bower should create a folder named at the root of the application bower_componentes. If he’s creating inside vendor, there’s something wrong.

  • So it creates at the very root .. I expressed myself badly @Wallacemaxters! I meant that if I put to create in public folder is wrong ... but now I’m confused because some tutorials talk to put the CSS and JS in Resources folder.

  • Folder resources is for something else. It is when you go to work with the Laravel Elixir that you put the Assets there. If you are working with web development, without relying on tools like gulp or nodejs, then you can use only the bower installing in the public folder.

  • So I would like to create the dependencies with Bower and then use Gulp as an automator, is it possible ? Sorry for the ignorance, I’m learning now ...

  • You better use the npm. The elixir of Laravel uses gulp to manage the tasks. I’ll give you an interesting link (it’s English, but you can understand just by looking at the code)

  • See how to use the elixir

  • Thank you! I will watch .. Has skype ?

Show 2 more comments

1 answer

4


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

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

my_app/
  app
  bootstrap
  resources
  storage
  public
  vendor

So you must install with bower from the folder my_app.

Thus:

cd my_app

bower install jquery

It is also possible to configure the bower to install directly into the folder public.

Behold:

Complement

In my humble opinion, I suggest you use the Laravel Elixir. He uses the gulp to automate tasks such as minification of Ssets, 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. That is very useful!

Small example with Laravel Elixir

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

Do something like:

{
  "directory" : "resources/assets"
}

I used the folder resources/assets because that’s where Laravel Elixir reads the Assets files to generate Assets to run in production (joined or minified, for example).

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

Now use the elixir, inside the archive gulpfile.js, to be able to copy, convert, minify or merge your application files. 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, that will cause your files to be compiled to public/js/vendor.js. So just include this file in your main template.

  • Best impossible explanation hahahahah !

Browser other questions tagged laravel bower

You are not signed in. Login or sign up in order to post.