CODEWITHSUNDEEP
laravelwebpacklaravel-mix
Shamseer Ahammed
Shamseer Ahammed

Reputation: 1947

Laravel Mix js combining all js files

How do I combine all of my js files to a single file with laravel mix? and is it a good practice to directly keep the downloaded external plugins js files and CSS files in public directory? because we have a js folder already in resource folder and it's getting compiled and saved in public directory when we do npm run production, not sure if this is correct or not.

This is how my resource folder looks like :

enter image description here

And my app.js file looks like this :

enter image description here

Upvotes: 0

Views: 6838

Answers (3)

Islam ElHakmi
Islam ElHakmi

Reputation: 274

you can add them from npm , or if these are external plugins like my case you can do this 

mix.js('resources/assets/js/app.js', 'public/js')
 .scripts([
          "path/plugin1.js",
          "path/plugin2.js",
           .......
         ], 'public/js/all.js').styles([
          "path/plugin1.css",
          "path/plugin2.css",
          .....
         ],'public/css/all.css');

for more useful information you can visit : https://laravel.com/docs/5.6/mix

Upvotes: 1

Winston Fale
Winston Fale

Reputation: 1346

You can use npm to install jquery and do it like this same with jeff

window.$ = require('jquery');

OR but if you have your own script want to include then

just put it top on vue instance

require('./jquery.js') //based on your picture it jquery and app.js are in same level 


window.vue = require('Vue')

this will automatically read and being compiled by the npm.

Upvotes: 0

Jeff
Jeff

Reputation: 25221

You can include those libraries by installing them to NPM with npm install jquery for instance. Then in your bootstrap.js file you would have something like:

window.jQuery = window.$ = require('jquery');

That would make it available in the window, and then you still have just one js file to include on the client (your compiled app.js file).

If you do have a file you want separate from your main bundle, and it isn't one you have pulled in through NPM, it's not a bad thing to commit it straight to the public folder. I would keep them in /resources/assets/js/vendor and then use mix.copy to move them into /public/js/vendor. Thats just because I prefer all of my work to be in resources and to have public be all compiled or copied files.

Upvotes: 2

Related Questions