laravel mix

for some reason it works. I think because I am running npm run watch. lol. What is it actually for?

From the very link you just posted yourself

After generating the versioned file, you won't know the exact file name. So, you should use Laravel's global mix function within your views to load the appropriately hashed asset. The mix function will automatically determine the current name of the hashed file:

I don't understand about the hash file - why would you create another file (hashed file) for : mix('css/custom.css')

for example ?

and also what is npm run watch is for? Is it to build the laravel mix?

"The npm run watch command will continue running in your terminal and watch all relevant files for changes. "

Changes the files into hashed or what?

I assume this is the first time you are creating a website? Browsers cache your custom.min.css file, meaning it load load your changes. Therefor you add a hash to the name https://laravel.com/docs/6.x/mix#versioning-and-cache-busting

Regarding watch. When you change a js file you need to recompile it. Using watch it does this automatically

It might be worth your time to spend the weekend watching some laracasts. Questions like these are quite basic and should be covered :)

I am in the middle of watching the video and there are part that I don't understand, such as:

1. When you run npm install in laravel, will it install all dependency written in package.json ? Does npm install command has anything to do with laravel ?

2. Also, if I run npm run watch to keep an eye of my sass changes, how can I run both "php artisan serve" and "npm run watch" at the same time?

3. I don't understand this statement:

     $path = mix('css/app.css');
   

What is the $path? Should it be public/css/app.css ? I think if you run npm run dev it will automatically compile webpack.mix.js ? So the result will be css files in public/ isn't it true?

ref: https://laravel.com/docs/6.x/helpers#method-mix

npm is node package manager and is not Laravel specific. Npm install will install dependencies from package.json.

Versioning / cache busting or using the mix() helper is there for this reason... have you ever updated a CSS file and then refreshed the browser wondering why it didn't update the change you just made... then realize you needed to CLEAR YOUR CACHE?

Cache busting takes care of this automatically by versioning the file... meaning it adds a parameter like app.css?version=737urhu3uh3uri3 to your files... this works because when the browser sees the file url has changed, albeit only because of the added parameter... it will make sure the browser re-downloads that file instead of using that cached version.

The mix helper already looks in the public directory.

1. So would you recommend that all my css link using mix helper so that it will refresh faster?

2. I also do not understand why these css links files does not exist in my public/css ?

3. resources/js/app.js

   When I have these things:

     import Vue from 'vue'
         import SuiVue from 'semantic-ui-vue'
         import axios from 'axios'
         import numeral from 'numeral-es6'
         import Autocomplete from 'vuejs-auto-complete'
         import VueContentPlaceholders from 'vue-content-placeholders'
   
     Vue.use(SuiVue)
     Vue.use(VueContentPlaceholders)
   
     Vue.component('axios', axios);
     Vue.component('lazy-level-field', require('./components/LevelLazyField.vue').default);
    Vue.component('category-form', require('./components/CategoryForm.vue').default);
   
     ....
   
    Object.defineProperty(Vue.prototype, '$bus', {
     get() {
       return this.$root.bus;
     }
   });
   
   window.bus = new Vue();
   
   window.axios = axios;
   window.numeral = numeral;
   
   Vue.prototype.$axios = window.axios;
   Vue.prototype.$numeral = window.numeral;
   
   window.Vue = Vue
   
   window.app = new Vue({
      el: '#app',
   data: {
       bus: bus // Here we bind our event bus to our $root Vue model.
      }
    });
   

   Why wouldn't you write this js files directly to public directory instead of using laravel mix and have to run npm run dev in order to compile the js file to public? Is it because of the versioning file again so that it refresh faster?

@davy_yg I feel like you are utilizing the forum before searching for videos here. Please do some research. Laravel Mix is covered in almost every single beginner course for Laravel, usually within the first 5 lessons. Try to search topics for videos on Laracasts before posting questions.

Here is everything you need to know about the cache-busting (aka: why you use the mix helper) part of Laravel...

https://laracasts.com/series/learn-laravel-mix/episodes/7

There's a free video on the basics of this. Jeffrey actually explains this.

I watched this lesson: https://laracasts.com/series/learn-laravel-mix/episodes/7

and tried to run it. I run: D:\xampp2\htdocs\sesa_final\sesa-e-commerce>npm run dev

and checked public/mix-manifest.json

The hashed id is not there yet.

{
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css",
     "/css/homepage.css": "/css/homepage.css",
     "/css/home.css": "/css/home.css",
     "/css/custom.css": "/css/custom.css",
     "/css/detail-produk.css": "/css/detail-produk.css",
     "/css/override-styles.css": "/css/override-styles.css"
 }

@davy_yg Watch the video again. It's all in there.

Seriously... you have to add .version() to your web pack file and run npm run dev.

Inspect your page in Chrome dev tools. You'll see the hash there.

I am in the middle of watching the fourth one and have a question if you are using helper function like:

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

First where is the mix path located? Is it in public/css/app.css Second do you have to reference the file in webpack.mix.js in order to compile it to the public?

webpack.mix.js

mix.styles('resources/css/app.css', 'public/css')

@davy_yg

Answer 1: mix() is a helper function, not a path.

Answer 2: Yes. The video explains this. Are you watching these videos with the sound off or something?

I watched lesson 7. Now, I am trying to summarize the gist. So for example I am writing:

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .sass('resources/sass/homepage.scss', 'public/css')
        .sass('resources/sass/home.scss', 'public/css')
        .sass('resources/sass/custom.scss', 'public/css')
        .sass('resources/sass/detail-produk.scss', 'public/css')
        .sass('resources/sass/override-styles.scss', 'public/css')
        .version();

In order to reference the link I have to write:

<link rel="stylesheet" type="text/css" href="{{ mix('js/app.js') }}"/>
   <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ mix('css/homepage.css') }}"/>
   <link rel="stylesheet" type="text/css" href="{{ mix('css/home.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ mix('css/custom.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ mix('css/detail-produk.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ mix('css/override-styles.css') }}"/>

It will reference the same hash link that are being compiled, true?

Second, I also do not understand how could you run npm artisan serve and npm run watch at the same time?

"Second, I also do not understand how could you run npm artisan serve and npm run watch at the same time?"

You mean php artisan serve and npm run watch?

The php artisan serve start a simple web server and npm run watch is a watcher that checks files for changes and if they are changed runs the compiler.

So they are two completly different things. It's like running Word and Excel at the same time.

You can open two terminals at the same time. Or 3. Or 10 :)

I finally figure how you can run both npm watch and npm artisan serve at the same time. Yet you have to save and refresh the browser to see the update.

What about my first question about the webpack? I just wondering why you have to use the mix helper? Is it to address the same hash link that are being compiled through webpack.mix.js ?

You don't have to use is if you don't want to.

It's used to merge multiple css or javascript files into single files. You can also juse other preprocessors for it but it's not necessary.

If you have a javascript heavy front end I'd recommend to use it since it's almost impossible to keep the files straight. The same goes for CSS.

What do you mean by: "You don't have to use is if you don't want to."

use is or mix ? It's someone else code so I am trying to understand what they are doing and it will become my codes now.

It's not a single file either all the files that ends with scss turns into css eventually. All that is written in the webpack.mix.js

Just like I said you don't have to use mix if you don't want to. It's optional.

Either you write plain CSS in your /public/css directory and refrence it as such

<link href="/css/yourcssfile.css">

Even if you want to use mix you still can do

<link href="/css/yourcssfile.css">

or with version handling to force refresh of the cached css file

<link href="{{ mix('css/yourcssfile.css') }}">

So it's up to you which you want to use.

And it does not update the page without a reload for that you need a plugin like BrowserSync.

You really need to start learning the basics since no matter how we try to explain it you still don't understand it.

If you use mix:

<link href="{{ mix('css/yourcssfile.css') }}">

Do you have to write the same filename in the webpack also? or choose one either webpack or mix helper?

Of course you have the same filename in both.

mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')

The app.scss will be app.css

So to reference it you do

 <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}"/>

Webpack processes the SCSS in this case and creates plain CSS.

whatif in the webpack.mix.js is not using version(); but in the frontend still using mix helper so will there be hashes values in the css files?

@davy_yg If you do not use the version() function... No, there will not be hashes. The entire point of version() and mix() is to add the hashed cache-bust parameter after the filename.

lol now this is confuse me why the other developer uses mix helper without using version() in the webpack.mix.js . Does it do any good?

Yes, it does. For example you can use .version()only when you build for production and choose not to use it in development.

Or maybe they are just reading the docs and use the mix due to C&P programming.

Like I stated earlier it's up to you how you want to do it.

@davy_yg just curious, have you seen the free video on this, Jeffrey actually explains this stuff.

I already watched video 1-9.

I actually tested the codes. and I get this error:

Unable to locate Mix file: /css/test.css. (View: D:\xampp2\htdocs\sesa_final\sesa-e-commerce\resources\views\vendor\ui\layouts\sesa.blade.php) (View: D:\xampp2\htdocs\sesa_final\sesa-e-commerce\resources\views\vendor\ui\layouts\sesa.blade.php)

I create a test file in public/css/test.css

and try to reference that file:

sesa.blade.php

<link rel="stylesheet" type="text/css" href="{{ mix('css/test.css') }}"/>

webpack.mix.js

.styles('resources/css/test.css', 'public/css')
    .version();

run npm dev

get this error:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js     --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Either Jeffrey failed to deliver the value of lessons or you failed to pay full attention and your heart to learn it.

I believed online learning is not the suitable learning way for you, please go get a tutor lead class for programming and laravel or at least get some books read and re-read, online training may too fast for you.

Another suggestion is concentrate to be a good front-end web developer let the back-end to the back-end developer.