Laravel 5 Front-End Overview 0:00In this series, we will take a break from the back-end and instead focus our energy on some of the front-end tooling that Laravel 5 provides. Now, at least at the time of this recording, where Laravel 5 isn't officially out just yet, this is what our welcome page looks like. So notice that Laravel's taking a slightly different approach this time around. Rather than just giving you a dummy hello.php file that you will immediately delete, instead, we're going to try to get you up and running as quickly as possible. And what I mean by that is, yes, we have our welcome page, but you also have some built-in auth, registration, all of this stuff comes right out of the box, which is pretty cool. But that being said, before we go any further, what if you just don't want this? Removing Boilerplate Scaffolding 0:38auth, registration, all of this stuff comes right out of the box, which is pretty cool. But that being said, before we go any further, what if you just don't want this? What if you want a completely fresh slate? Alright, no problem whatsoever. If we switch to the terminal, I can run php artisan fresh, and that's going to remove all of the boilerplate that we provide to you out of the box. So notice that this includes a lot of the auth-specific controllers and their respective views. So that means if we were to switch back and refresh the page, notice that all of it has been removed. Touring New Config Files 1:11So that means if we were to switch back and refresh the page, notice that all of it has been removed. So do keep that in mind. But in our case, we do want this stuff. So I'm going to reset it. Reset hard, to the last commit, and now it's all back. Okay, cool, let's move over and take a look at the source code. Now we're going to dig into a lot of this stuff, but at least for the opening video, we're just going to review the terrain. So notice that we have a few new config files within our project root.we're just going to review the terrain. So notice that we have a few new config files within our project root. Now Laravel recommends that you use Bower for your front-end dependencies. Notice that we didn't say require, it's just a recommendation. If you don't like it, delete the file. Next, notice that within our Bower RC file, we're specifying that all Bower dependencies should be saved to the vendor directory. And that seems like a sensible place, right? Okay, if you're not familiar with Bower, we have a full lesson dedicated to it, so just stick around. Introducing Elixir and Gulp 2:04Okay, if you're not familiar with Bower, we have a full lesson dedicated to it, so just stick around. Next, you'll see we have a Gulp file that uses a new tool called Laravel Elixir. Now Elixir is really nothing more than a nice, clean, fluent wrapper around Gulp. So for example, rather than having a massive Gulp file, we abstract all of that stuff away and instead offer you a simple API that you can use. So again, we will dedicate a couple lessons to Elixir, but just to give you a quick recap of this file, notice how easy it is. If you want Sass support for your project, you just say mix Sass, you specify the name of the file, and you're done.If you want Sass support for your project, you just say mix Sass, you specify the name of the file, and you're done. Nothing else to do there. Next, because we are installing some Bower dependencies to the vendor directory, many times you will need to move those to your public directory. So we offer a publish method to very easily do that. In this case, notice that we are finding the file within Vendor, Bower Components, jQuery, and then the jQuery.min file, and we are moving it to public JS Vendor. And we're also doing that with a Twitter bootstrap file, and also Font Awesome. And then lastly, we are moving all of our fonts to a fonts directory.And we're also doing that with a Twitter bootstrap file, and also Font Awesome. And then lastly, we are moving all of our fonts to a fonts directory. But actually, the API offers a lot more than what we see here by default. For example, what if you decide, I don't want to use Sass, I prefer Less. We'll just swap it out. Less, app.less, and you're done. Now you're using Less. What if you also want to trigger CoffeeScript? Okay, let's run Coffee, and now we're done. Everything will be compiled.Okay, let's run Coffee, and now we're done. Everything will be compiled. Next, what if we also want to trigger our PHP unit tests? Easy. PHP unit, and we're done. And for one last quick example, what if I need to concatenate and minify some set of scripts? Well, we could tackle this in two ways. I could say mix scripts in the public JS directory, and what that's going to do is read every single file and concatenate them together.I could say mix scripts in the public JS directory, and what that's going to do is read every single file and concatenate them together. And that can be useful in some situations. However, as you probably know, for JavaScript, the order of the concatenation can very much matter. So in those scenarios, we just use scripts, and then we specify our array of files. For example, JavaScript jQuery.js, and then we have some other kind of library that we want, and then we have our own custom scripts, etc., etc. Now when we run this, Elixir and Gulp will automatically concatenate and minify these files. Assets Structure and Sass 4:37Now when we run this, Elixir and Gulp will automatically concatenate and minify these files. And of course, the same is going to be true for your style sheets. Alright, like I said, we're going to review that a lot more in future lessons. So that's enough for this file. Next, you'll notice that in Laravel 5, we place all of our assets, so this would be a Sass or Less or Coffee script. All of that stuff will go within Resources and Assets. And out of the box, we'll assume that you're using Sass, so you get a Sass app.css file. Also notice that we're giving you some simple recommendations for how you might organizeAnd out of the box, we'll assume that you're using Sass, so you get a Sass app.css file. Also notice that we're giving you some simple recommendations for how you might organize your Sass. So for example, anything related to your buttons can go within here. Anything related to navigation can go there. And if you have styling that will always be unique to a specific page, just place it within your Pages folder. But I want to go back to our main app.scss. So we import variables. This is a good place to declare any special colors and things of that nature.So we import variables. This is a good place to declare any special colors and things of that nature. Next notice that we pull in Twitter Bootstrap out of the box. But remember, if you don't want to use Twitter Bootstrap, just delete it and you're good to go. But next, we pull in these two partials and finally the pages. So once you install Laravel, at this point you could remove anything you don't want and go from there. But the key thing to understand is that because we're using both Power and Gulp out of the box in Laravel, it makes all of this stuff so much easier. Workflow Benefits and Gulp Watch 6:00But the key thing to understand is that because we're using both Power and Gulp out of the box in Laravel, it makes all of this stuff so much easier. Now you don't have to worry about how to install Sass, or how to set up Gulp, or how to create your first Gulp task. None of that stuff is necessary. We've already set it up out of the box, which means you can run a single command, gulp watch, to get up and running. All right, so that's been your quick introduction to this new world. In follow-up lessons, we're going to dig in a lot more to these various components.In follow-up lessons, we're going to dig in a lot more to these various components.
