Laravel Elixir Gulp将两个独立的较少文件混合在一起 [英] Laravel Elixir Gulp mix two separate less files

问题描述

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

资产的默认值

先backend

  elixir.config.assetsDir ='resources / backend /'; 
 
 elixir（function（mix）{
 mix.less（'backend.less'）; 
}）; 
  

第二个前端

  elixir.config.assetsDir ='resources / frontend /'; 
 
 elixir（function（mix）{
 mix.less（'frontend.less'）; 
}）; 
  

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

这些是目录（Laravel 5）

 资源
后端
减
后端无
前端
减
前端无
 $ / code $ 

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

我也试过

  mix.less（'frontend.less'，null，'resources / frontend /'）; 
  

虽然这是混合脚本文件的工作，但它不能用于混合更少的文件。

**更新28-3-2015 **

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

  elixir.config.assetsDir ='resources / frontend /'; 
 mix.less（'frontend.less'）; 
 
 elixir.config.assetsDir ='resources / backend /'; 
 mix.less（'backend.less'）; 
  

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

方案

我已经发现以下工作：



  elixir（function（mix）{$ b $ （['app.less']，'public / css / app.css'）
 .less（['bootstrap.less']，'public / css /bootstrap.css'）; 
 
}）; 
  

关键要注意的是：



• 在目的地提供文件名，即写 public / css / app.css 而不是 public / css /


• 链接 .less 调用，而不是使两个单独的 mix.less（）调用

使用laravel-elixir version 3.4.2

In Laravel 5 I am trying to create two different css files for my frontend site and backend site (cms). The source files are in two different directories.

The default value for assets in

first the backend

elixir.config.assetsDir = 'resources/backend/';

elixir(function (mix) {
    mix.less('backend.less');
});

Second the frontend

elixir.config.assetsDir = 'resources/frontend/';

elixir(function (mix) {
    mix.less('frontend.less');
});

Both are in the same gulpfile.js.

These are the directories (Laravel 5)

resources
    backend
        less
            backend.less
    frontend
        less
            frontend.less

Only the frontend file is compiled to public/css/frontend.css.

I also tried

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

though this is working for mixing script files it is not working for mixing less files.

**Update 28-3-2015 **

There seems to be no solution for my problem. When I do:

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

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

Only the last one (backend) is executed. When I place the last two lines in comments the first one (frontend )is executed. It's Ok for now because the backend styles should not change very often but it would be very nice to mix multiple less files from multiple resource folders to multiple destination folders.

解决方案

I have found the following to work:

elixir(function (mix) {

    mix
      .less(['app.less'], 'public/css/app.css')
      .less(['bootstrap.less'], 'public/css/bootstrap.css');

});

The key things to notice:

• provide the file name in the destination, i.e. writing public/css/app.css instead of public/css/
• chain the .less calls instead of making two separate mix.less() calls

Works for me with laravel-elixir version 3.4.2

这篇关于Laravel Elixir Gulp将两个独立的较少文件混合在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！