Laravel 5 is comming out this november! And Taylor Otwell (Creator of laravel) and Jeffrey Way (Owner of created in my opinion the new big thing for the laravel framework. The laravel framework has until this moment never been arround developing the front-end of the website with technologies like sass, coffee script etc. Since Laravel 5 is going to be another big leap for the frame work they made Laravel Elixer and after playing arround with it for a few hours i'm sold! Good Job Jeffrey!

How to get it?

Well Laravel Elixer is shipping by default in a fresh instalation of Laravel 5. Since as of this moment Laravel 5 is not yet released you can pull in the Development branch with the following composer command: composer create-project laravel/laravel <your-new-app-name> dev-develop it will ask you to remove the current .git env if you are planning to use the app type Yes .

Getting ready!

Laravel elixer depends on NodeJS and Gulp if you haven't yet installed nodeJS (Be ashamed! no just kidding) visit and follow the instalation guide if you have Homebrew installed just paste the following into your terminal! brew install node what installs nodejs and sets everything up for you!

NodeJS is installed? Great lets go on! go in your terminal to your project directory. and type in npm install this will look in the package.json file for all nodejs dependencies Laravel elixer might need. It will look something like the following:
NodeJS installation list

Lets start already!

Pfew.. Now everything should be in place to get the real action going! Now let's test if everything is working properly! in your terminal goto your project and type in gulp you should see alot of stuff hapening and you will get a message in the top right corner with a green icon:

Laravel unit tests confirmation message

Awesome! everything is working!

Laravel elixer uses the Gulpfile.js for the config and setup. Open the file in your IDE and take a quick look at what is going on there! On default it will use less routes events and phpUnit this is all changeable however while writing this it is most likely this setup will change a bit. Awesome now lets try to use the less compiler that is baked in by default. create a new folder for our less files in resources/assets called less so your full path would get resources/assets/less what is the default scan dir for the less files for Laravel Elixer. now as you can see in the Gulpfile.js only the bootstrap.less file is scanned it this moment so for the purposes of this tutorial lets create inside resources/assets/less the file bootstrap.less and add some dummy css styles to it:

body {

.some-element {
    transition: all 3s;

Great lets run the gulp command! In your terminal type gulp or to be more specific run gulp less. If you get the green lights in your top right corner again awesome now there should be a new public/css/bootstrap.css with the following content:

body{background:#ff0;margin:0}.some-element{-webkit-    transition:all 3s;transition:all 3s}

Awesome! our less file gotted concatenated and autoprefixed. BEHOLD THE POWER OF GULP!

But John what will happen when i have multiple less files and i need that compiled?

Well Laravel Elixer has your back just specify an array of files in the Gulpfile.js for your less attribute so it will look something like:

mix.less(["bootstrap.less", "seccondfile.less"])

Awesome! Ok create seccondfile.less in resources/assets/less/ and since we are going our gulp command in the terminal! Now you will see the following file public/css/seccondfile.css has been created.

Ok John awesome but what about partials?

Well offcourse Laravel Elixer thought about that! Lets create the dir resources/assets/less/partials and create a less file inside that folder I will call mine header.less and fill some dummy content there. Import it into bootstrap.less with @import 'partials/header'; now awesome! run gulp in your terminal! and offcource it will import it to your bootstrap.css and and do all the magic like minify and autoprefix your imported partial

Ok John I start seeing some awesome benefits but we need less HTTP requests! and don't want to include two css files!

Ahhhh right!! well this is also easy we can add a new rule to our Gulpfile.js we can use the .styles attribute provided by Laravel Elixer! So lets add our css files to the array!

mix.less(["bootstrap.less", "seccondfile.less"])

and like magic a new file has been created: public/css/all.min.css the less files have been compiled and the css files have been merged together tot one file! Hoppa one less HTTP request!

Ok but what if I use browser caching like expire_headers and i need to change all.min.css i don't want to use .css?id=1

Offcource! Well thats an easy one! With Laravel Elixer we can make use of a manifest! Say what?? Yeah a manifest file! its awesome! just add the following to your Gulpfile.js


You could reference any file here if you want to just by appending more entries to the array. And that is it! Now we can see a new directory and two files have been created
Build manifest directory

So John how would you put that in your template?

Well since Laravel Elixer will ship by default we can use the new helper! In your example.blade.html'all.min.css') this would look like:

<link rel="stylesheet" type="text/css" href="{{ elixir('all.min.css') }}" />

And voila! The file will be found in the manifest and it will update the version when it will be changed!

Is that all?

No we can do so much more with elixer like automatic unit testing route indexing event listeners and much more but since it is still in DEV mode so we will dive in more in a later time when Laravel 5 will go stable! Interested in what elixer suports at this time? check out ingredients folder in the git repo!

Also Laracasts has a awesome demo explaining how Laravel Elixir works! Its free! check it out here:

© 2015. All Rights Reserve John in 't Hout.