Laravel Elixir Gulp混合了两个单独的较小的文件

Question

在Laravel 5中，我试图为我的前端站点和后端站点（cms）创建两个不同的css文件。源文件位于两个不同的目录中。

中资产的默认值

首先是后端

elixir.config.assetsDir = 'resources/backend/';
elixir(function (mix) {
    mix.less('backend.less');
});

第二个前端

elixir.config.assetsDir = 'resources/frontend/';
elixir(function (mix) {
    mix.less('frontend.less');
});

两者都在同一个gullfile.js中。

这些是目录（Laravel 5）

resources
    backend
        less
            backend.less
    frontend
        less
            frontend.less

只有前端文件被编译为public/css/fronend.css.

我也试过

mix.less('frontend.less', null, 'resources/frontend/');

虽然这适用于混合脚本文件，但不适用于混合较少的文件。

**更新日期：2015年3月28日**

我的问题似乎没有解决办法。当我这样做时：

elixir.config.assetsDir = 'resources/frontend/';
mix.less('frontend.less');
elixir.config.assetsDir = 'resources/backend/';
mix.less('backend.less');

只执行最后一个（后端）。当我把最后两行放在注释中时，第一行（前端）被执行。现在还可以，因为后端样式不应该经常更改，但将多个资源文件夹中的多个较少文件混合到多个目标文件夹中会非常好。

Answer 1

尝试：

elixir(function(mix) {
    mix.less([
        'frontend/frontend.less',
        'backend/backend.less'
    ], null, './resources');
});

Answer 2

代替您的变体：

elixir(function(mix) {
    elixir.config.assetsDir = 'resources/frontend/';
    mix.less('frontend.less');
    elixir.config.assetsDir = 'resources/backend/';
    mix.less('backend.less');
});

试试这个代码：

elixir.config.assetsDir = 'resources/frontend/';
elixir(function(mix) {
    mix.less('frontend.less');
});
elixir.config.assetsDir = 'resources/backend/';
elixir(function(mix) {
    mix.less('backend.less');
});

Answer 3

我已经玩了几天了，到目前为止我找到的最好的选择如下。

首先，将资源文件保留在默认位置，以便查找resources/assets/less中的较少文件。然后将文件分离到前端和后端资源中，在特定资源文件夹中添加子文件夹，如

resources/assets/less/frontend/frontend.less
resources/assets/less/backend/backend.less

现在给每个人打这样的电话…

    mix.less('frontend/frontend.less', 'public/css/frontend/frontend.css');
    mix.less('backend/backend.less', 'public/css/backend/backend.css');

提供给每个mix.less的第二个参数可以指向你想要的任何地方

您不能直接在资源根目录中进行最高级别的拆分，但它仍然允许进行一些分离，并且所有内容都编译在一个gulp中。

Answer 4

我发现以下内容有效：

elixir(function (mix) {
    mix
      .less(['app.less'], 'public/css/app.css')
      .less(['bootstrap.less'], 'public/css/bootstrap.css');
});

需要注意的关键事项：

• 在目标中提供文件名，即写入public/css/app.css而不是public/css/
• 连锁.less调用，而不是进行两个单独的mix.less()调用

适用于我的laravel elixir版本3.4.2