You can think of Laravel Mix as a wrapper around Webpack. And as you may know, Webpack is an incredibly powerful build tool. But one side effect of that is, sometimes the learning curve is a bit greater than we might want. Often for a new project, you're researching Webpack documentation, you're pulling in countless plugins, you're constructing a build process that takes you away from actually working on the site. So Laravel Mix attempts to solve that for the 80% of users who don't require a very specific compilation. Let me show you. I'm going to create a new Laravel project. We'll call it Learning Mix. Now, a common misconception is that Laravel Mix depends and requires Laravel. Nope, it has optimizations for Laravel, but you can use it in any standalone project, if you wish. Anyhow, let's cd in there, and we'll open this in my editor. Now, you'll see that Laravel includes Mix as a dependency. So if you're working on a

it in any standalone project, if you wish. Anyhow, let's cd in there, and we'll open this in my editor. Now, you'll see that Laravel includes Mix as a dependency. So if you're working on a standalone project, you will want to npm install laravel-mix yourself. Next, Laravel also includes our webpack.mix.js file. So you can think of this as your core entry point to your build process. Behind the scenes, Mix is going to read this file, figure out what you want, and then dynamically construct the necessary configuration object, which is then passed to webpack. Now again, for standalone projects, you will pull it in yourself, and then you can either copy our example webpack.mix.js file, or just create a new one and pull it in and get started. Next, if we switch back to package.json, you'll see that Laravel includes some helpful npm scripts. Now, an npm script is just an alias around a common command that you'll frequently run. For example, if frequently you need to set

you'll see that Laravel includes some helpful npm scripts. Now, an npm script is just an alias around a common command that you'll frequently run. For example, if frequently you need to set an environment to production, and then you want to run webpack, but you want to make sure that you have some progress feedback, and maybe you want to hide them all, you know, it starts to get a little complicated to remember every single time. So instead, you can take these common commands and place them within your package.json file, and then assign them a common alias. Then, you can simply run npm run, and then the name of the alias or the command. So in our case, if we want to run development, well, I could do development, or you can see we have another one called dev that just points to that. So this is what I frequently do. But now, if we give this a run, everything's going to blow up. Let's take a look. Cross environment command not found. So what's going on? Well, it got

points to that. So this is what I frequently do. But now, if we give this a run, everything's going to blow up. Let's take a look. Cross environment command not found. So what's going on? Well, it got to this point. It's trying to reference this cross environment tool, which you don't need to worry about, but it just normalizes your syntax across all OSes. But anyways, it can't find that, and that's because we haven't installed our dependencies. We have a package.json file, but no node_modules directory here. So I'm going to run npm install. Now, it's important to note, I'm going to assume that you have a basic 101 understanding. So you have npm set up on your machine, you have a basic understanding of JavaScript and things like that. Otherwise, you'll want to go to nodejs.org and pull in either of these options. Once you do, that npm command will be available to you. Or, if you're familiar with Yarn, you can pull that in and reference that utility instead. Anyways,

and pull in either of these options. Once you do, that npm command will be available to you. Or, if you're familiar with Yarn, you can pull that in and reference that utility instead. Anyways, if we switch back, it looks like we have everything. So let's give it another run. npm run dev. And we're done. Here's our output. So it looks like Laravel is referencing a number of fonts that have been moved over to our public directory. We've compiled our app.js file, as well as a CSS file. And once again, where is this all coming from? If we switch back to code, it's coming from your webpack.mix.js file. So let's just imagine you don't even have Sass, you're just compiling a JavaScript file. And as you may know, with Laravel, we include one out of the box. So we're basically saying, this is our file, we're pulling in Vue, we're pulling in jQuery, a number of other things. We're using modules here. So we're referencing a number of things that all modern

basically saying, this is our file, we're pulling in Vue, we're pulling in jQuery, a number of other things. We're using modules here. So we're referencing a number of things that all modern browsers don't support natively. So we need to compile all of that down to vanilla JavaScript that any current browser can understand. Okay, so let's imagine, once again, there's no Sass, we're just doing JavaScript. All right, well, if we give that one a run, all right, now we just compiled that file. Or maybe in reverse, you don't yet have any JavaScript, but you would like to use Sass. Well, mix.sass, give it a path to the source file, and then as the second argument, a path to the output. And generally, that's going to be the shape it takes. You reference the command you want, like Sass or Less or Stylus or PostCSS, you give it the source file, where am I going to find this file? And then you're going to give it an output directory, or if you need to be more specific,

like Sass or Less or Stylus or PostCSS, you give it the source file, where am I going to find this file? And then you're going to give it an output directory, or if you need to be more specific, you can do so. Otherwise, if you just specify a directory, we will use the existing file name. All right, let's give that one another run, npm run dev. Okay, great. So now we can see our compiled, generated CSS file. And again, as part of that, let me show you. Let's go into our Sass directory. This, again, is just the default that Laravel provides. Laravel is importing all of Bootstrap here, and part of Bootstrap includes a number of custom fonts. So the way Webpack works is when it detects those fonts, it's going to automatically move them to your public directory so that they can, of course, be referenced within the browser. So here are the files that have been copied over, and we can see proof of that right here. Now, what's nice about Mix is you don't have to figure

can, of course, be referenced within the browser. So here are the files that have been copied over, and we can see proof of that right here. Now, what's nice about Mix is you don't have to figure out which plugins have to be pulled in. You don't have to figure out the syntax. You don't have to figure out how to extract CSS from your compiled JavaScript file. This is all core Webpack stuff that you can learn, and I would recommend doing it, but sometimes you just want to do the basics. Sometimes you just want to compile some JavaScript. You want to copy some files. You want to use Sass or PostCSS, and you don't want to have to learn all of that underlying code. Now, imagine you're working with Less instead. That's your preference. All right. Rather than Mix.Sass, we can just do Mix.Less. And once again, where's the file? Let's put it anywhere. It doesn't matter. How about right in the resources directory? Foo.less. Where am I going to move that compiled file?

Mix.Less. And once again, where's the file? Let's put it anywhere. It doesn't matter. How about right in the resources directory? Foo.Less. Where am I going to move that compiled file? Well, we usually want it in our public directory. So why don't we put it right there? public/css. Okay. So now, if we give this a run, it will detect, oh, you're actually using Less instead of Sass, which we offer out of the box. So let me pull in a couple of things that we need to compile Less. Next, though, it's going to fail. Let's take a look. This dependency was not found. So it's telling you, hey, you gave me this file, but it doesn't exist. So I don't know what you want me to do. I can't resolve this file that you've given me. Of course not. It doesn't exist. Let's create a new file. Foo.Less. And then let's just say our primary color is brown. And then for our body, the color will be our primary. So we have a basic Less variable that we reference. Okay. Let's give

a new file. Foo.less. And then let's just say our primary color is brown. And then for our body, the color will be our primary. So we have a basic less variable that we reference. Okay. Let's give it another run. Now the file exists. It will find it. It will compile it down. And we can see the output. If we take a look now, let's go into our public/css directory. It's called Foo.css. And there we go. So now within your projects, maybe welcome.php right here. We want in the css directory. It's called Foo.css. And we're all set to go. So now that you have everything up and running, in the next episode, let's keep reviewing what Nix has to offer.