在 Laravel 5.3 中使用合并的 js 和 css

Question

我正在关注这个：https://laravel.com/docs/5.3/elixir

这是我的 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']);
 });

在这里，我只是将所有 css 和 js 文件合并为两个文件：all.css 和 all.js 以最小化 HTTP 请求（以提高性能）

这两个合并文件，存储在

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

我将它们包含在模板中，例如：

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

这里的问题是 css 和 js 的组合，即 all.css 和 all.js 存储在 "build" 目录中。

因此，我需要将其他相关依赖项（如字体）移到该构建目录中。

那么，这里的解决方案是什么？

如有任何帮助，我们将不胜感激。

谢谢，

Parth vora

Answer 1

Elixir 的 version 方法允许您设置我相信的路径

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

然后使用

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

你的情况

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

Answer 2

这应该有效：

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

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

Answer 3

根据此文档，我认为没有为版本方法提供自定义路径的选项。

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

在 Laravel 5.3 中使用合并的 js 和 css

Working with merged js and css in Laravel 5.3

laravel-5

laravel-elixir