Understanding Laravel Mix

Question

Understanding Laravel Mix

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...

File based JS & CSS instead of App based

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?

What are the bootstrap.js and app.js files?

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...

Getting rid of Vue

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?

Instantaneous

I think first you will have to look into what the result should look like. As far as i understand you have a very simple js/css structure without any pre-processors. So start with minifying your global assets and then group your other assets by page. – Howlett

@CerlinBoss Yes, you are right, my JS/CSS structure is extremely simple, in fact, I would expect most sites to use something similar. Nevertheless, what I would expect is to have one file e.g. about-some_hash.js which contains all of the code required for about.php. And the same for CSS... Essentially one unique combined and minified file for each page. Does this make sense? – Instantaneous

Absolutely. As i said earlier, you can have a global js (min) file and css (min) file, then have page specific minified js and css files separately. Laravel mix does nothing other than what gulp would do. – Howlett

@CerlinBoss Yes, but these should then be combined to reduce the number of requests... Essentially, what I want to know is very simple, is it bad practice to do this: mix.js(['resources/assets/js/app.js', 'resources/assets/js/about/about.js'], 'public/js/about/about.js') etc for each page... Or is there a better way to do it? – Instantaneous

You will end up having separate task for each page. This would happen even if you have sass. If you have common code inside app.js, then generate a separate app.min.js file for that and include that separately. – Howlett

Or you can compile all to the same file and use browser caching. – Howlett

@CerlinBoss Thank you Cerlin, I am going to post another question which explains this in a little more detail, and hopefully a little clearer. I don't want to have a separate app.min.js as this will require another lookup from the browser, however, I do not want to serve the same JS and CSS file to every page on the site as this will decrease the efficiency of each page... – Instantaneous

@CerlinBoss I will post the link to my new question here once done so feel free to answer there if you want to :-D – Instantaneous

@CerlinBoss Check it out if you have a moment: #42622618 :-) – Instantaneous

Answer 1

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.

Howzell

Firstly, thank you very much for your answer! However, I don't think you have actually understood my question(s). I am not asking what Laravel Mix does, I know what it does... What I am trying to understand is what is the most efficient way to use Laravel Mix in order to compress specific files for specific pages? – Instantaneous

I would recommend that you don't, and instead use one combined JavaScript and one combined stylesheet for your entire application. If you're asking how do you make the relevant styles or parts of your script activate on certain pages, you might look into adding the controller name and action as classes to the body tag, and using that to target functionality. If you want to use Laravel Mix to create a separate asset for each page, it's not designed for that and there's not really an efficient way to go about it. – Howzell

Thank you for coming back to me; I hear you and given that it is clearly how Laravel encourages it to be used, I will give this a try although I am still reserved about including unused code on certain pages... Nevertheless, would you mind editing you answer to include an example of app.js and some_page.js, along with a mix example just so I can see how I should go about this and then I can mark the answer as accepted :-D – Instantaneous

Most sites you use will do just this, serve you single assets even though any given page will only use a subset. If you want a real-world example, here's the webpack.mix.js file from my blog: github.com/dwightwatson/neontsunami/blob/master/webpack.mix.js It demonstrates how you might go about having separate assets if you wanted, I broke up my admin assets because they were totally different from the main site. – Howzell

Thank you very much Dwight, this is exactly what I needed to see! I do have one last question if that's okay? All my javascript is just pure old fashioned javascript within my own framework and jQuery etc. However, each page has its own implementation of a function called SetPageElements() which initialises anything required for that specific page. How would you go about creating a function that is unique for each page? Obviously I could just rename the function for each page but I would rather not if it can be avoided... – Instantaneous

Each file in ES2015 JavaScript should be self contained, so having a function with the same name in each shouldn't be an issue - it's just a matter of hooking it up so each file knows when to kick itself off. – Howzell