Gulp 多租户和语义用户界面

我正在寻找一种在我的Laravel应用程序中使用多个SUI主题的方法，每个租户（网站）一个主题。我将语义用户界面（

Semantic UI-less

repo）作为节点单元模块安装

不知何故，我需要有多个

theme.config

文件，以便指向不同的

site

文件夹以覆盖默认主题。同样，每个租户一个。然后，我可以使用Gulp为特定租户构建一个主题。覆盖

theme.config

文件也是一个选项，但我不知道如何解决这个问题

我可以想到的另一个选择是为每个租户提供多个composer.json文件。但我认为这仅仅是对主题的过度使用，可能会导致碰撞问题

---

在互联网上找不到任何东西，除了没有答案的问题。我希望有人能帮助我

我想出了一个非常酷的解决方案，它替换了theme.config中的

siteFolder

变量，以指向正确的目录。之后，我可以编译更少的文件

Gulpfile.js

var Elixir  = require('laravel-elixir');
var gulp    = require('gulp');
var replace = require('gulp-replace');
var rename  = require('gulp-rename');
var util    = require('gulp-util');

/*
 |--------------------------------------------------------------------------
 | Tenants
 |--------------------------------------------------------------------------
 |
 | Build Semantic UI individually for each tenant.
 |
 */
if (typeof util.env.tenant === 'string') {

    var tenant = util.env.tenant;
    var tenantPath = 'storage/tenants/' + tenant + '/assets';
    var semanticPath = 'node_modules/semantic-ui-less/';

    Elixir.extend('theme', function(tenant) {

        new Elixir.Task('theme', function() {
            /**
             * Perform some magic by pointing the @siteFolder variable
             * to the current tenant's theme directory in order for each
             * tenant to have it's own unique Semantic UI theme.
             */
            return gulp.src([semanticPath + 'theme.config.example'])
                .pipe(replace("'site'", "'../../" + tenantPath + "/theme'"))
                .pipe(rename('theme.config'))
                .pipe(gulp.dest(semanticPath));
        });

    });

    Elixir(function(mix) {
        mix
            .theme(tenant)
            .less(semanticPath + '/semantic.less', tenantPath + '/css/semantic.min.css')
            .scriptsIn(semanticPath . '/definitions', tenantPath + '/js/semantic.min.js')
            .copy(semanticPath + '/themes/default/assets', tenantPath + '/css/themes/default');
    });

}

用法

---

gulp——租户{name}

我想出了一个非常酷的解决方案，它替换了theme.config中的

siteFolder

变量以指向正确的目录。之后，我可以编译更少的文件

Gulpfile.js

var Elixir  = require('laravel-elixir');
var gulp    = require('gulp');
var replace = require('gulp-replace');
var rename  = require('gulp-rename');
var util    = require('gulp-util');

/*
 |--------------------------------------------------------------------------
 | Tenants
 |--------------------------------------------------------------------------
 |
 | Build Semantic UI individually for each tenant.
 |
 */
if (typeof util.env.tenant === 'string') {

    var tenant = util.env.tenant;
    var tenantPath = 'storage/tenants/' + tenant + '/assets';
    var semanticPath = 'node_modules/semantic-ui-less/';

    Elixir.extend('theme', function(tenant) {

        new Elixir.Task('theme', function() {
            /**
             * Perform some magic by pointing the @siteFolder variable
             * to the current tenant's theme directory in order for each
             * tenant to have it's own unique Semantic UI theme.
             */
            return gulp.src([semanticPath + 'theme.config.example'])
                .pipe(replace("'site'", "'../../" + tenantPath + "/theme'"))
                .pipe(rename('theme.config'))
                .pipe(gulp.dest(semanticPath));
        });

    });

    Elixir(function(mix) {
        mix
            .theme(tenant)
            .less(semanticPath + '/semantic.less', tenantPath + '/css/semantic.min.css')
            .scriptsIn(semanticPath . '/definitions', tenantPath + '/js/semantic.min.js')
            .copy(semanticPath + '/themes/default/assets', tenantPath + '/css/themes/default');
    });

}

用法

gulp——租户{name}