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

Ben Swinburne · Accepted Answer · 2016-12-06 12:38:00Z

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>

answered Dec 6, 2016 at 12:38

Ben Swinburne

26.6k10 gold badges75 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parth Vora Over a year ago

no it didn't worked. There is no such second parameter for mix.version() laravel.com/docs/5.3/elixir#versioning-and-cache-busting

Ben Swinburne Over a year ago

It's undocumented- See here. Looking at that code suggests you could also set public.versioning.buildFolder in your elixir config

user7268715 · Accepted Answer · 2016-12-08 16:49:21Z

0

This should work:

mix.version(['style.css', 'script.js'], 'public');

https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting

answered Dec 8, 2016 at 16:49

user7268715

Comments

user7268849 · Accepted Answer · 2016-12-08 17:02:08Z

0

As per this documetation, I think there is no such option to provide custom path for version method.

https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting

answered Dec 8, 2016 at 17:02

user7268849

Collectives™ on Stack Overflow

Working with merged js and css in Laravel 5.3

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related