I am currently in the process of migrating one of my websites to Laravel in order to make it a little more maintainable in future... I have plenty of experience building API's with Laravel but I have very limited experience building websites with Laravel and resultantly I am in need of a little bit of guidance from another pro.
In short, I would very much appreciate answers to the following very simple questions if anyone can spare me a couple of mins...
I like to write my JS and CSS files in a particular way where each page has their own specific files relevant to the page. For example, about.php
might have the following dependencies:
JS:
jquery.js
any_other_third_party_library.js
app.js
(global functions)about.js
(page specific functions)CSS:
some_third_party_library.css
app.css
(global styles)about.css
(page specific styles)On my own framework, the above would be combined and minified into one file for JS and one file for CSS. From what I understand, Laravel Mix does exactly this...
However, as far as I can see, the way to do this would be as follows:
webpack.mix.js:
// About
mix.scripts([
'resources/assets/js/app.js',
'resources/assets/js/about/about.js'
], 'public/js/about/about.js');
Very simply, what I would like to know; is the above the correct way to go about this? Is there a better, more efficient, way to automate this for each page?
From what I can see, these files just load dependencies but this is a little confusing as some dependencies might be page specific... Please can someone explain in a little further detail what these files are for? Or at least, what the difference is between them...
I have no interest in using Vue
in my project so I have deleted the following files:
/components/Example.vue
and the Vue
code in app.js
Does this matter in any way?
You'll bundle up all your styles and scripts a single file each and serve them to the client minified.
For front end assets, call mix.sass('resources/assets/sass/app.scss')
. In that entry point to your styles you will be able to import your other stylesheets as you need using Sass's @import 'about';
syntax. (Rename your other CSS files to end in .scss
too).
For your back end assets, call mix.js('resources/assets/js/app.js')
. Then, similarly you can import other JavaScript modules using import './about.js';
. You may want to look up ES2015 modules so you can learn how to write modular JavaScript.
Read through the bootstrap.js
file to see how Laravel hooks up jQuery and Vue by default. You don't need any of this, so remove whatever you don't want or delete the entire file if you don't need any of it.
Vue comes out of the box with Laravel but it's just a suggestion, you can replace it with your own front end framework of choice or rip it out and replace it with nothing. Up to you.
Edit: Long story short; use mix.sass
and mix.js
, read up on using Sass and ES2015 modules to write awesome code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With