Как создать несколько семантических файлов. <theme>.min.css при создании семантического интерфейса?

Question

Я использую Semantic UI React и пытаюсь сгенерировать несколько CSS-файлов тем, чтобы можно было переключать темы (в основном между режимами темного и светлого цветов). Я нашел этот ответ, и я пытаюсь сделать то же самое, но не могу добиться успеха.

Я хочу, чтобы gulp выплевывал одну semantic.theme-name.min.css за включенную тему, но хотя он генерирует CSS, я не могу заставить gulp выплевывать разные файлы или папки вообще - последняя тема в моем массиве ниже всегда перезаписывает файл semantic.min.css (в моем случае "amazon""theme), и я вообще не получаю semantic.theme-name.min.css файлов.

Может кто-нибудь заметить, что я делаю неправильно?

Вот то, что я пробовал, которое генерируетправильно скомпилированный css для последней темы в массиве colorModes:

    /*******************************
              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);
    };

РЕДАКТИРОВАТЬ - добавляем также мой semantic.json ниже: {

  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "../public/styles/",
      "uncompressed": "../public/styles/components/",
      "compressed": "../public/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"
}

Answer 1

Обновление: мне удалось найти проблему! Предыдущая попытка выглядела в папке dist, которой не было. Я изменил скрипт, чтобы сначала скопировать все во временный каталог css, затем переименовать нужный файл и, наконец, скопировать его в мой публичный каталог. Если у кого-нибудь есть более точное решение, дайте мне знать, иначе это пока работает:)

my-project / 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);
};

my-project /semantic.json:

{
  "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"
}