Laravel Web app elixir minify script and css

Question

I hope to make use of elixir to minify the script and css files.

In my master layout, I have included those files separately

{!! Html::script('plugin/Flat-UI/js/flat-ui.min.js') !!} 
{!! Html::style('plugin/Flat-UI/css/flat-ui.min.css') !!} 
{!! Html::script('plugin/JQuery-UI/Flick/jquery-ui.js') !!} 
{!! Html::style('plugin/JQuery-UI/Flick/jquery-ui.css') !!}

As I know, minify will combine all files into one file right? If that case, did I need to manually change the master layout so that it only include that one file instead of as shown above?

{!! Html::script('minify.js') !!}

Borislav Itskov · Accepted Answer · 2016-12-13 10:22:00Z

1

Elixir doesn't work like that.

If you're using Laravel 5, the default elixir configuration is this one:

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

That means all the scss in resources/assets/sass/app.scss will be converted to css and minified afterwards.

So you need to configure an app.scss in resources/assets/sass/app.scss and import all your css files there:

// in app.scss
@import "plugin/Flat-UI/css/flat-ui.min.css"
@import "plugin/JQuery-UI/Flick/jquery-ui.css"

After running gulp in the console, an app.css file will be created in public/css, include it and you're good to go:

<link rel="stylesheet" href="/css/app.css" />

As for your script file, you'll need to change the default implementation of elixir

elixir(mix => {
    mix.sass('app.scss')
       .scripts([
           // all files you want mixed into one
           'plugin/Flat-UI/js/flat-ui.min.js',
           'plugin/JQuery-UI/Flick/jquery-ui.js',
       ]);
});

This will create an public/js/all.js file that you could include in your page.

It's written well in the laravel documentation if you're still having problems after this:

https://laravel.com/docs/5.3/elixir#javascript

Hope this helps :)

answered Dec 13, 2016 at 10:22

Borislav Itskov

2452 silver badges13 bronze badges

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

1 Comment

Shinance Over a year ago

Thanks for your reply ~ it clear my doubt a lots. Is it possible to minify all css + js into 1 file, instead of 2 file minify.css & minify.js?

msonowal · Accepted Answer · 2016-12-13 09:38:30Z

1

I guess you are talking about using laravel elixir, then yes but use a helper to generate the url

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

answered Dec 13, 2016 at 9:38

msonowal

1,6873 gold badges18 silver badges37 bronze badges

1 Comment

Shinance Over a year ago

Hi ~ thanks for your aid. What does the elixir helper do, this helper will auto minify the js/css? If i use this helper, did i still need to manually run gulp to generate the minify file?

Collectives™ on Stack Overflow

Laravel Web app elixir minify script and css

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related