[Lesson 17] Laravel Mix (Whoa) ✅

in our last layer of l7 lesson you may have noticed that we have duplicated folders in our resources directory and our public directory they both have a js folder and a sass folder that doesn't make too much sense if we have those folders both places so let's break this up and break this down so on the left side our resources directory and on our right side we have our public directory now our resources directory it never gets loaded by the url the url the browser does not ever access resources directly public on the other hand it does so imagine we have a browser well whenever we add a url and we reference a link the browser can access our public files using a url so it can load those public assets using a url where on the other side we can only do that with public we can't do that with the resources so resources you can't access that through the url public you can resources you can't public can be loaded by the browser resources can't so why do we have these two differing folders where we duplicate the js and the sas directory well let's focus on sas first sas.css is not loadable by the browser right it's what we call a css pre-processor now this is huge because the browser is never going to load the sas file but it can load css files and sas is what's known as a css pre-processor so what's that mean well it means two things one is sas should not be that sas directory should not be in our public folder should be in our resources folder and we need to bundle our sas or compile our sas into vanilla css before our browser ever loads we need to pre-process the sas previous or prior to the actual loading of our browser our browser can then access the vanilla css the guy in the middle responsible for pre-processing the sas and the vanilla css is webpack layer val mix is a fluent api a wrapper a beautified wrapper around webpack the catch is that sas is not the only css preprocessor there's tons of them more than that there's actually javascript that needs to be pre-processed there's multiple syntaxes of javascript and not every version or syntax of javascript is readable by the browser you can also combine files and you can move files around you can do a whole bunch of stuff with webpack through the power of node or back in javascript you can also move stuff around using webpack you can combine files using webpack you can minify files using webpack you can version files using webpack you can cache files using webpack you can do a lot with webpack okay so right now we're on webpack.js.org and this image is honestly probably the best image i can think of for showing off webpack so on the left side this is actually going to be our resources directory we can add js we can add hbs.cjs whatever it is dot sas.less.stylist which are all css preprocessors or any type or format of javascript which there are a lot and we can either bundle these files together or and compile them down into static assets that every single browser can read one of the things with webpack is it gets a little confusing there's a it's a really really cool technology but it has all of this stuff it's its own beast of a thing to learn right so laravel and specifically jeffrey ways being as awesome as lare bell and jeffrey both are they created this thing called larabelle mix which has its own website now laravel mix is a fluent wrapper around webpack and so instead of having to deal with all of this jazz right over here i'll put input module that exports can we require dependency graphs all of this stuff you can basically ignore for most of the use cases and within larabel you can use this laravel dot mix and this is just a webpack around or a wrapper around webpack and it's called layerable mix to interact with layerable mix you just go to our app and then webpack.mix.js and so with that in mind how do we use it well first let's go and open up both our directories and let's see we got our sas right here we just said we can't even load this in our browser so it's going to be in our public directory so let's just add all of this stuff and let's just move it right here just like that and we'll refactor okay now we're going to delete our file just like that and what we're going to do instead is we're going to see okay we're going and we're outputting to our main.css so we're going to go down to webpack.mix now what we're going to do is we're simply going to add another dot sas we're going to say resources slash sas slash main.css or scss and we want to point that and output it to our public assets slash css directory now more than that we've already got our main.css there so let's actually for now just output it to our css so what that should do is it's going to say public and then it's going to go and create a new css directory and then create a main.css file in that directory that leaves us a question though how do we actually run our webpack file you're gonna have to go to nodejs.org and then download node pick whatever operating system you are on and install i would say the current you don't need to get the latest but just the current version for the operating system you're on this will install node which is back in javascript we're not really going to be using it too much at least not knowingly but we do need it to properly use webpack through larabel mix when you install node it's going to install npm as well now npm is very similar to composer composer is a package manager that installs php packages and pm is a package manager that installs javascript packages composer needs php the cli version to run properly npm needs node which is server-side.js aka the command-line version of javascript when on a server to run properly they both need a server-side language to properly run and install update packages and the dependencies that a given application has on whatever packages they also both have a project level dependencies file so composer.json that's composer package.json that's npm now these will define the dependencies that and pms installer composer is installed and when they install these packages these dependencies whether it's in pms javascript packages or composers php packages composer will install all of the php packages in vendor where npm will install all of the javascript packages in known modules they also both have a lock file so a lock file on composer composersitecomposer.log on mpmsidepackagelock.json those are used to lock in the versions of a given package so you can work better in a team and then of course they both also have the terminal tool which is composer or npm composer install and pm install composer require npm install we can go to our terminal and we can run npm install now what is npm install going to do well just like we have composer.json where we have all of our php packages from our composer.json we have our package.json and this is all of our javascript packages and so we can do npm install and we'll just install all the packages defined in our package.json equivalent to composer.json and composer install just for javascript now that we have our npm install command executed we can go back and see this new node modules directory whenever we ran composer install composer creates this vendor directory with all of our php packages just like composer creates vendor npm creates this node modules directory with all of our javascript packages so we know it ran properly now you can also see that we have scripts defined in our package.json and these packages or these scripts have npm rundev and npm run development and you can pretty much ignore this except i want you to notice that this script calls the webpack.js it calls webpack from our node modules and so that is npm run development and alias of npm run development is npm run dev knowing this we can now do npm run dev now before we run this notice we don't have a css directory in here in webpack.mix we said okay get our sas main.css from resources and output that to a public css directory so now when we go back and we run npm run dev because we defined webpack we told webpack to compile to a public slash css directory it'll do that and there we go and there's some errors there but we now have our public css directory it looks like our errors prevented us from actually loading the thing so the first thing is our fonts so if we go to assets and we grab our css let's do this copy that go back here we'll just paste that right there all right for our images as well um so what we're going to actually do we're going to copy this so our sas is looking for our images so what we can do is we'll paste our images right there next let's copy our entire fonts directory we're going to do the same thing and this is just because our sas is relatively referencing our fonts and our images within the dot scss files so now if we go back to npm we do npm run dev we'll probably still get some warnings but oh good to go and it's successfully compiled so now if we go back and we go to public css and then main.css we have properly used webpack to bundle our fancy scss or sas via laravel mix next time we'll dive in and we'll do a little bit more on webpack and then we'll move on

Channel: Clean Code Studio

Views: 7,600

Keywords: Laravel 7, Php, php, programming, laravel, coding, jeffrey way, learn laravel, web development, laravel mix, asset bundling, php laravel, laravel from scratch

Id: 3Pu6QJTWZBY

Length: 15min 42sec (942 seconds)

Published: Wed Jul 15 2020