css - 如何在构建语义 ui 时生成多个 semantic.<theme>.min.css 文件？

Question

我正在使用 Semantic UI React，并尝试生成多个主题 css 文件以允许主题切换(主要是在深色和亮色模式之间)。我找到了 this回答，我也在尝试做同样的事情，但似乎无法成功。

我希望 gulp 为每个包含的主题吐出一个 semantic.theme-name.min.css，但是虽然它确实生成了 css，但我似乎无法让 gulp 吐出不同的文件或文件夹——我下面数组中的最后一个主题总是覆盖 semantic.min.css 文件(在我的例子中是“amazon "主题)，我根本没有得到任何 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);
    };

编辑——在下面添加我的 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 目录中，然后重命名必要的文件，最后将其复制到我的公共(public)目录中。如果有人有更简洁的解决方案，请告诉我，否则这暂时有效:)

我的元素/语义/任务/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);
};

我的元素/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"
}