LESS Compilation Optimization0:00
We have a couple new features when it comes to Elixir and Laravel 5.1. A lot of streamlining across the board, but also a couple new things that you might like. So, let's begin with, how about some of the optimizations. Let's go into Resources, Assets, and I've added a JS directory, and there's also an included LESS directory. Now, you'll see I have two files here. Let's just stub this out with some generic CSS. app.less, and also other.less. Okay, let's imagine that we want to compile both of these. Well, typically, for most applications, you'll have your master LESS file, or SASS file, and then from there, you import everything that's required. But, not everyone does it that way.
Auto-Concatenating CSS Outputs0:39
and then from there, you import everything that's required. But, not everyone does it that way. Some people prefer to create separate files, and then compile them using Gulp. Well, now, yes, we'll compile it, but we'll also automatically concatenate those files for you. Like this, app.less, and other.less. Okay, let's go ahead and run that, gulp, and we're done. If we come back to public/css, before, you would have an app.css file and an other.css file. So, what ended up happening is a lot of people would run LESS, or run SASS, and then they would pass that to mix.styles to concatenate everything. Now, we do it for you automatically.
Concatenating Compiled CoffeeScript1:48
Once again, before, if you were to run this, you'd get multiple files, and now, very likely, you want to concatenate those anyways, so we do it for you. mix.coffee, module.coffee, and then also module2.coffee. Okay, let's run that one down. And now, if we switch back to public/js, you'll get a single file with your compiled JavaScript. All right, so next, how about something new? How about ECMAScript 6 support, or at least compilation? This is pretty cool. Well, in the past, you know that you could do mix.scripts, right? And here I have, once again, just two dummy files here.
Introducing ES6 via Babel2:23
Well, in the past, you know that you could do mix.scripts, right? And here I have, once again, just two dummy files here. So I could say 1.js and 2.js. All right, so if we run that, yes, we will just concatenate or combine all of those files. So now, within here, you get your all.js file that contains both. And, of course, if you want to place that somewhere else, you are free to do that. If we run that now, it will save it to public/foo/bar.js. Okay, so that's just old news. But what if we want to run this through Babel? And if you're not familiar with Babel, think of it as a compiler.
Arrow Function Syntax Example3:48
Maybe some kind of method. Is of age. Okay, well, why don't we use the arrow syntax? Rather than doing something like this, return age is greater than or equal to 21, why don't we do this, drinkingAge. So, this is the typical way you would do it, right? But, if you want to use the arrow syntax, you could do this. Get rid of the function keyword. Get rid of the braces.
Get rid of the function keyword. Get rid of the braces. And then, because this is nothing more than a simple expression, you could place that on the same line, and even remove the return keyword. Now, we can just replace the function with an arrow. And really, I know in this case it's a little confusing, because we're using greater than or equal, but we also have the arrow syntax. But, nonetheless, this is proper.
Compiling with mix.babel5:12
well, we know that in some browsers that's just not going to work. IE9 and lots of browsers will not know how to interpret that. So, instead, to make this as portable as possible, we want to compile that. All we have to do is switch mix.scripts with mix.babel. And that's it. The API is identical. It literally does the same thing. It combines the files, but then it runs it through the Babel compiler, whereas this just combines the files. All right, so let's run it one more time.
whereas this just combines the files. All right, so let's run it one more time. But now, if we take a look at all.js, we have compiled everything down to regular JavaScript. So cool. And in Laravel 5.1, this is the easiest thing in the world.
