Working with merged js and css in Laravel 5.3

Question

I am following this: https://laravel.com/docs/5.3/elixir

Here is my gulpfile.js:

elixir(mix => {
    mix.webpack('app.js')
    .styles([
        'bootstrap.min.css',
        'agency.css',
        'font-awesome.min.css',
        'bootstrap-social.css',
        'bootstrap-datetimepicker.min.css',
        'select2.min.css',
        'icheck.css',
        'custom.css'
        ])
    .scripts([
        'jquery.easing.min.js',
        'jqBootstrapValidation.js',
        'agency.min.js',
        'moment.js',
        'bootstrap-datetimepicker.min.js',
        'select2.min.js',
        'contact_me.js',
        'icheck.min.js',
        'ckeditor.js',
        'echo.js',
        'custom.js'
    ])
    .version(['css/all.css', 'js/all.js']);
 });

Here, I'm simply merging all css and js files into two files: all.css and all.js to minimise HTTP request(to improve performance)

Those two merged files, getting stored at

public/build/css/all-5ba9458ba4.css
public/build/js/all-1723826a20.js

And I'm including them into templates like:

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

The issue here is that those combined css and js i.e all.css and all.js getting stored inside of "build" directory.

So, I need to move other related dependencies (like fonts) inside that build directory.

So, what is the solution over here?

Any help would be appreciated.

Thanks,

Parth vora

Answer 1

Elixir's version method allows you to set a path I believe

mix.version(['css/all.css', 'js/all.js'], 'public');

Then use

elixir('path/to/script.js', null) // note the null

In your case

<link rel="stylesheet" href="{{ elixir('css/all.css', null) }}">
<script src="{{ elixir('js/all.js', null) }}"></script>