Laravel Elixir Gulp mix two separate less files

Question

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.

Answer 1

I have been playing around with this for a couple days and the best option I've found so far is as follows.

First leave your resources files in the default location, so for less files look in resources/assets/less. Then to separate the files into your front and back end resources add sub folders in the specific resource folder like so,

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

Now call each one like so..

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

The second parameter provided to each mix.less can point to wherever you want it to.

You can't split at the highest level directly in the resource root, but it still allows some separation, and everything compiled in one gulp.

Answer 2

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

Answer 3

Instead of your variant:

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

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

Try this code:

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 4

Try:

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