Scroll down to our plugins right here. Like so. Okay, so now the paths, yeah, this is going to be unique to your application. So for example, with a Laravel project, it would be your resources/views directory, and you would use a regular expression there. So what glob.sync will do is if you say resources/views, something like that, that's going to search through it and return an array of every single file that matches that. So all of those paths will be sent to PurifyCSS plugin. It's then going to scan those, compare it against the CSS, and for once again, for any selector that is not found in your HTML, it will be stripped from the bundled CSS chunk. Okay, so in our case, we just have index.html, so I'm going to hard code it. But yeah, in real life, you would probably have a directory of views that you want to scan. Okay, so let's switch back. We have to require that, of course. So let's grab that. And also notice, if we're going to use glob,

you would probably have a directory of views that you want to scan. Okay, so let's switch back. We have to require that, of course. So let's grab that. And also notice, if we're going to use glob, we have to require that one as well. So we'll pull this in like so, and then var glob and require that in. Okay, so that looks good to me. So take a look. We are compiling our SASS, but then extracting that to a dedicated style.css, and that style.css will be named whatever the entry file is, so main.css. But along with that process, we're now running it through the PurifyCSS plugin. So let's give it a shot and see what happens. Right now, here's my SASS file. I have a one class and a two class. npm run dev. It compiles down, and if we now go into our style.css, it's blank, which means it's doing its job. Just to prove it to you, we'll comment that out, run it again, and that should generate the two classes. So when we bring it back, we don't see anything, and again,

which means it's doing its job. Just to prove it to you, we'll comment that out, run it again, and that should generate the two classes. So when we bring it back, we don't see anything, and again, that's because it scanned the HTML file, and if we take a look at this, there's no reference to a one class or a two class. Let's add one on here. Okay, well now when we run it, it will find a one class, so it will keep that, but it didn't find two, so it will strip that one. And of course, if we were to reverse this, like so, we're going to get the opposite end result. Pretty cool. Now of course, if you're using Laravel, you can use Blade. That's still going to work. You can use layout files. You can extend. You have sections. All of that should still work just fine. Just an aside for the Laravel users. Now, two quick things. It's not just going to work with classes or IDs. The same will be true for selectors in general. So if we have a div and then a paragraph tag, well, if we have here div p,

users. Now, two quick things. It's not just going to work with classes or IDs. The same will be true for selectors in general. So if we have a div and then a p tag, well, if we have here div p, color is blue, yeah, that's still going to work. So that selector will exist. We can pile it down, and there we go. Let's come back, and we'll say class is one, and now we should have the two classes. So it actually works surprisingly well, as you can see right there. Okay, now the final thing I want to show you is if we go to package.json, don't forget that we have a production npm script, but this will seemingly break it. So if we run it, it's done. But if we take a look at our CSS, nope, there's no minification there. We minified the JavaScript, but the CSS was ignored. So let's go back to the plugin documentation, and you'll see some options here. Specifically, we're going to want the minimize section. So should we enable CSS minification here?