CODEWITHSUNDEEP
laravel-5laravel-elixir
Parth Vora
Parth Vora

Reputation: 4114

Working with merged js and css in Laravel 5.3

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

Upvotes: 1

Views: 147

Answers (3)

user7268849
user7268849

Reputation:

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

Upvotes: 0

user7268715
user7268715

Reputation:

This should work:

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

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

Upvotes: 0

Ben Swinburne
Ben Swinburne

Reputation: 26467

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>

Upvotes: 1

Related Questions