Laravel 5.3 shipped with a node dependency called Laravel Elixir. However, that's been upgraded, switched over to Webpack, originally from Gulp, and it has also been renamed Laravel Mix. Now, a quick note on this. Because Laravel Mix uses Webpack behind the scenes rather than Gulp, well, if you were pulling in any Laravel Elixir-specific plugins, what you should do is just stick with Laravel Elixir for that project. However, for any new projects, yeah, I think you're going to like this. It's a lot faster, a lot more flexible, and a lot of power here. In this case, you can see that we're compiling some JavaScript, located here, to the JS folder, and then, of course, SASS to the CSS folder.

In this case, you can see that we're compiling some JavaScript, located here, to the JS folder, and then, of course, SASS to the CSS folder. And what's nice about this JS section, this is going to allow you to use ECMAScript 2015 syntax. It's going to allow you to use modules. It'll allow you to use Vue components. And you can even do things like mix.extract to extract your vendor libraries, if you need to. Next, let's go into our package.json file, and you're going to see a handful of scripts here for triggering Webpack. You can run these like so. First, for any new project, make sure you run npm install.

You can run these like so. First, for any new project, make sure you run npm install. And what that's going to do is read all of these dependencies and pull them in for you. Okay. Now, we can trigger any one of these by saying npm run and then the name. dev is going to compile down Webpack one time, like so. And you can see the output here. So we've outputted some fonts, as well as our app.js file and app.css. We can find those right here and right here. You'll also find a mix.manifest file that can be used by Laravel behind the scenes, so don't delete that.

You'll also find a mix.manifest file that can be used by Laravel behind the scenes, so don't delete that. Okay. Next, if we go to package.json, now, the production command is going to do the same thing, but it'll trigger it within a production environment so that you get minification and things like that. Next, these two, hot will be for hot module reloading, and that'll be especially beneficial if you work with .vue components. But for watch, yeah, you'll use this a lot. npm run watch.

But for watch, yeah, you'll use this a lot. npm run watch. This will compile Webpack, but also set up a watcher. And as such, it'll monitor all of your files, and when one of them is changed, it'll recompile very, very quickly. So let's take a look at assets.js right here. Let's just imagine we make some kind of general change, and if I save it, sure enough, you'll see that this recompiles. And of course, the exact same thing is going to be true for your sass as well. So maybe we have bodyBackground is red, save it,

And of course, the exact same thing is going to be true for your sass as well. So maybe we have body background is red, save it, and that will compile as well. Now, when it comes to referencing these files, well, let's go to the welcome page that's included with Laravel and clear some of this out, and then the same thing here. Okay, well, of course, we can manually link to these. So I could say css app.css, and then down here, we could link to our script. And we'll say hello world.

and then down here, we could link to our script. And we'll say hello world. So if we view this in the browser, sure enough, we get our ugly red screen. But yeah, all we have to do at this point is make our changes per usual, and that will recompile behind the scenes, which means if I give this a refresh, now we have green. However, you can also do other things. So if we go back to webpack.mix.js, we could say I want to version my files. Now, for any bundled files, it'll apply a unique hash to the end, and that will force a cache bust on your server, which is very useful.

Now, for any bundled files, it'll apply a unique hash to the end, and that will force a cache bust on your server, which is very useful. Let's give that a shot, npm run, and we're going to trigger this in a production environment. So when we do, if we switch back and scroll up, you'll now see that we have these unique hashes in place, and also in the process, the files have been minified. And if we scroll down, yeah, that's all minified. You're just not seeing the comments there. Anyways, one issue with that, though, is, well, now we can't hard code these values.

You're just not seeing the comments there. Anyways, one issue with that, though, is, well, now we can't hard code these values. So as such, if we come back to Chrome and refresh, it's going to break. So in Laravel 5.4, a new mix function is included, which means I could say call the mix function, and now I'm going to give it a path to the normal output file. That doesn't include the hash, and we'll do the exact same thing here. Now, if we come back and refresh, it's going to work again. And essentially, if you're curious, what happens behind the scenes is it's going to read this mix.manifest file,

And essentially, if you're curious, what happens behind the scenes is it's going to read this mix.manifest file, and it'll see, okay, here's the associated hashed version for that file path. So that's what I'm going to return to you right here. So that about does it, but of course, there's a lot of flexibility here. You can copy files, you can minify files if you need to. You can compile less, you can extract files, like maybe you want your view and your jQuery files in a separate file, and that way you can cache them for life without affecting the cache of your actual application code.

and that way you can cache them for life without affecting the cache of your actual application code. All of that stuff's going to be available to you. So that is Laravel Mix in a nutshell.