How Laravel Elixir Work?

If you are developing application with Laravel, and haven’t used Laravel elixir, you are missing a cool feature of this framework. Laravel Elixir will speed up your site loading, specially when you have so many http request. If you want to speed up your site and automate some task, than you must learn how to use elixir in your next Laravel project.

What is Laravel Elixir?

Imagine if you have so many css, JavaScript, less, scss or coffesript files to add in your Laravel Project, you might  probably include each of them like this:

    <link rel="stylesheet" href="{!!asset('/assets/dist/css/font-awesome.css')!!}">
    <link rel="stylesheet" href="{!!asset('/assets/dist/css/bootstrap.css')!!}">
    <link rel="stylesheet" href="{!!asset('/assets/dist/css/style.css')!!}">

For each file you include in you project, it will send a http request. It means as much as your assets files are more, your http requests are more, your site will be to much slow.

In laravel Elixir, you will do like this

<link href="{{ elixir('css/app.css') }}" rel="stylesheet">

You include your css once, and it will include all your css files. But before using elixir, you must know how to combine them?

To combine the assets, you must use any task runner. Task runner is something like bower, if you are have ever use. We will use Gulp. If you are using Laravel 5.+, you have already everything setup. All you need is Nodejs or nmp installed in your computer. If you don’t know what nmp is, no worries, just to to nodejs.org and install nodejs. NPM is Node Package Manager. It will allow you install packages to your project using command line tools.

So, to make sure you have nodejs installed on your machine, run the following command on cmd or terminal on mac.

node -v

It must show the nodejs version. If it gives any error, it means nodejs is not properly installed on your computer.

How to use Gulp and Laravel Elixir?

Alright, now lets use Gulp to combine our assets. Before that, run the npm install in your Laravel application directory. It will take a few minutes to install the necessary file in your application. Once it’s done, go to your application root and open the gulpfile.js file. It should look like following:

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {

    mix.styles([
      'test.css'
    ]);

});

Inside elixir function, you can define your CSS or JavaScript files to be combine in single file. By default, if you write only the file names, it will search in resource\assets\css or resource\assets\js directory. If your files are anywhere else. you can change that of course.

You can add more assets file in elixir function to combine in one file.

elixir(function(mix) {


    mix.styles([
      'test1.css',
      'test2.css',
      'test3.css'
    ]);

  	mix.styles([
      'test1.js',
      'test2.js',
      'test3.js'
    ]);


});

Now, You can run the gulp command in your app root, and it will generate a CSS file in public\css\all.css . 

And one file for JavaScript in same directory js\all.js.

To include the file, open the master blade or any other view and use elixir function to include the file generated in public directory of you app.

Example:

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

<script src="{{ elixir('js/app.js') }}"></script>

We are done!!. this much easy. Now if you look at you application size, it has increased to 120+ MB. You might be surprise, why this happened. Well there is a new folder in your application root (node_modules). You can remove that folder when your application development completed and you send it for production.

Conclusion

There are a lot more that Laravel Elixir can do, like compiling less, scss, coffeScript files and auto prefixing the new CSS3 properties. So, I hope it has been informative for you, if you have any question or error, feel free to comment it below. 🙂