如何生成多个语义信息。<；主题>；。构建语义ui时的min.css文件？

我正在使用

语义UI React

，并尝试生成多个主题css文件以允许主题切换（主要是在深色和浅色模式之间）。我找到了答案，我也试着这么做，但似乎没有成功

我想

gulp

为每个包含的主题吐出一个

semantic.theme name.min.css

，但虽然它确实生成了css，但我似乎根本无法让

gulp

吐出不同的文件或文件夹-我下面数组中的最后一个主题总是覆盖

semantic.min.css

文件（在我的例子中是“亚马逊”主题），而且我根本没有得到任何

semantic.theme name.min.css

文件

谁能看出我做错了什么

以下是我尝试过的，它确实为

colorModes

数组中的最后一个主题生成了正确编译的css：

    /*******************************
              Build Task
    *******************************/

    let
      // dependencies
      gulp         = require('gulp-help')(require('gulp')),
      runSequence  = require('run-sequence'),
      print        = require('gulp-print').default,
      // config
      config       = require('./config/user'),
      install      = require('./config/project/install'),

      // task sequence
      tasks        = []
    ;


    // sub-tasks
    if (config.rtl) {
      require('./collections/rtl')(gulp);
    }
    require('./collections/build')(gulp);

    const colorModes = ['dark', 'amazon'];

    module.exports = function (callback) {

      tasks.push('build-javascript');
      tasks.push('build-assets');

      for (let i = 0; i < colorModes.length; i += 1) {
        console.info('Building Semantic');
        const colorMode = colorModes[i];

        gulp.task(`copy theme ${colorMode}`, function() {
          return gulp.src(`./src/themes/${colorMode}/theme.config`)
          .pipe(gulp.dest('./src/'));
        });

        gulp.task(`build css ${colorMode}`, ['build-css'])

        gulp.task(`copy output ${colorMode}`, [`build css ${colorMode}`], function() {
          return gulp.src(`./dist/**/*.css`)
          .pipe(gulp.dest(`../${colorMode}/dist`));
        });

        if (!install.isSetup()) {
          console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic');
          return 1;
        }
        tasks.push(`copy theme ${colorMode}`);
        tasks.push(`copy output ${colorMode}`);
      }

      console.log('running tasks', tasks);
      runSequence(...tasks, callback);
    };

---

更新：我设法找到了问题！上一次尝试在不存在的dist文件夹中查找。我修改了脚本，首先将所有内容复制到一个临时css目录中，然后重命名必要的文件，最后将其复制到我的公共目录中。如果有人有更整洁的解决方案，一定要让我知道，否则现在就行：）

我的项目/semantic/tasks/build.js：

/*******************************
          Build Task
*******************************/

let
  // dependencies
  gulp         = require('gulp-help')(require('gulp')),
  runSequence  = require('run-sequence'),
  print        = require('gulp-print').default,
  rename       = require('gulp-rename'),
  // config
  config       = require('./config/user'),
  install      = require('./config/project/install'),

  // task sequence
  tasks        = []
;

// sub-tasks
if (config.rtl) {
  require('./collections/rtl')(gulp);
}
require('./collections/build')(gulp);

const colorModes = ['dark', 'default'];

module.exports = function (callback) {

  tasks.push('build-javascript');
  tasks.push('build-assets');

  for (let i = 0; i < colorModes.length; i += 1) {
    console.info('Building Semantic');
    const colorMode = colorModes[i];

    gulp.task(`copy theme ${colorMode}`, () => gulp
      .src(`./src/themes/${colorMode}/theme.config`)
      .pipe(gulp.dest('./src/')));

    gulp.task(`build css ${colorMode}`, ['build-css']);


    gulp.task(`rename css ${colorMode}`, () => gulp
      .src('./css/styles/semantic.min.css')
      .pipe(rename(`semantic.${colorMode}.min.css`))
      .pipe(gulp.dest('./css/styles')));

    gulp.task(`copy output ${colorMode}`, [`build css ${colorMode}`], () => gulp
      .src('./css/styles/*.css')
      .pipe(gulp.dest('../public/styles')));

    if (!install.isSetup()) {
      console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic');
      return 1;
    }

    tasks.push(`copy theme ${colorMode}`);
    tasks.push(`rename css ${colorMode}`);
    tasks.push(`copy output ${colorMode}`);
  }

  console.log('running tasks', tasks);
  runSequence(...tasks, callback);
};

---

更新：我设法找到了问题！上一次尝试在不存在的dist文件夹中查找。我修改了脚本，首先将所有内容复制到一个临时css目录中，然后重命名必要的文件，最后将其复制到我的公共目录中。如果有人有更整洁的解决方案，一定要让我知道，否则现在就行：）

我的项目/semantic/tasks/build.js：

/*******************************
          Build Task
*******************************/

let
  // dependencies
  gulp         = require('gulp-help')(require('gulp')),
  runSequence  = require('run-sequence'),
  print        = require('gulp-print').default,
  rename       = require('gulp-rename'),
  // config
  config       = require('./config/user'),
  install      = require('./config/project/install'),

  // task sequence
  tasks        = []
;

// sub-tasks
if (config.rtl) {
  require('./collections/rtl')(gulp);
}
require('./collections/build')(gulp);

const colorModes = ['dark', 'default'];

module.exports = function (callback) {

  tasks.push('build-javascript');
  tasks.push('build-assets');

  for (let i = 0; i < colorModes.length; i += 1) {
    console.info('Building Semantic');
    const colorMode = colorModes[i];

    gulp.task(`copy theme ${colorMode}`, () => gulp
      .src(`./src/themes/${colorMode}/theme.config`)
      .pipe(gulp.dest('./src/')));

    gulp.task(`build css ${colorMode}`, ['build-css']);


    gulp.task(`rename css ${colorMode}`, () => gulp
      .src('./css/styles/semantic.min.css')
      .pipe(rename(`semantic.${colorMode}.min.css`))
      .pipe(gulp.dest('./css/styles')));

    gulp.task(`copy output ${colorMode}`, [`build css ${colorMode}`], () => gulp
      .src('./css/styles/*.css')
      .pipe(gulp.dest('../public/styles')));

    if (!install.isSetup()) {
      console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic');
      return 1;
    }

    tasks.push(`copy theme ${colorMode}`);
    tasks.push(`rename css ${colorMode}`);
    tasks.push(`copy output ${colorMode}`);
  }

  console.log('running tasks', tasks);
  runSequence(...tasks, callback);
};

{
  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "./css/styles/",
      "uncompressed": "./css/styles/components/",
      "compressed": "./css/styles/components/",
      "themes": "../public/styles/themes/"
    },
    "clean": "dist/"
  },
  "permission": false,
  "autoInstall": false,
  "rtl": "both",
  "components": ["reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "placeholder", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "form", "state", "visibility"],
  "version": "2.4.2"
}