How to compile and version assets in Laravel elixir?

Question

At this moment I want to configure my assets for project. My Gulp file looks:

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(mix => {
   mix.sass('app.scss');
   .webpack('app.js');
});

But I want to turn on version for my css files. But existing info says to use:

mix.version('css/app.css'); // public/build/css/app-39d5f9a7.css

I don't know where I lost here, but I do not know the right way how to make this to work. I want to compile my .sass files and give then a version. I would like to use

<link src='{{ elexir('css/app.css') }}'>

in my layout.blade.php How to do it right?

Answer 1

The reason you're getting an error is because you're ending the statements instead of chaining them. You would either need to remove the ;s (apart from the last one) or add mix to the beginning of each method call.

Change your gulp file to be:

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js')
        .version('css/app.css');
});

Also, you should change:

<link src='{{ elexir('css/app.css') }}'>

to be:

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

Hope this helps!