从语义 UI 构建中删除未使用的模块/组件答案

【问题标题】：Remove unused modules/components from Semantic UI build从语义 UI 构建中删除未使用的模块/组件
【发布时间】：2015-10-28 20:18:39
【问题描述】：

找了半天，没有找到适合当前 Semantic UI 2.0 的解决方案。

问题是：如何从我的 JS/CSS 构建中删除未使用的组件和模块？我使用了大约 1/4 的功能，有什么简单的方法可以减小文件大小吗？从semantic.json 添加/删除项目的方法似乎不再起作用了。

谢谢， H.G.

【问题讨论】：

你喜欢我的回答吗？如果是，请标记为“正确”。谢谢！

标签： javascript css frameworks semantic-ui

【解决方案1】：

这可以在 Semantic UI 的安装过程中完成。你读过Install Semantic UI吗？

显示你将执行

npm install semantic-ui --save

启动安装脚本。

系统将询问您要运行哪种类型的设置（自动、快速、自定义）。如果选择“自定义”，系统会提示您安装 Semantic UI 的组件。

当然，这意味着您必须事先知道在开发过程中您将使用哪些组件。我选择了完全安装 Semantic UI 的方式，然后再次重新运行安装过程，现在剥离要安装的组件，一旦项目准备好发布。

亲切的问候，萨沙。

【讨论】：

【解决方案2】：

这是自定义组件的方法：

编辑 semantic.json 文件以微调组件列表。如果您选择了安装所有组件的默认安装，则此 json 文件中不会有 components 部分，您可以随意手动附加它。
进入 semantic 目录（默认为 project_root/semantic），然后运行两个 gulp 命令：
1. gulp clean
2. gulp build

然后将使用您最新的组件列表重建语义。下面是一个示例供参考：

    {
      "base": "semantic/",
      "paths": {
        "source": {
          "config": "src/theme.config",
          "definitions": "src/definitions/",
          "site": "src/site/",
          "themes": "src/themes/"
        },
        "output": {
          "packaged": "dist/",
          "uncompressed": "dist/components/",
          "compressed": "dist/components/",
          "themes": "dist/themes/"
        },
        "clean": "dist/"
      },
      "permission": false,
      "autoInstall": false,
      "rtl": false,
      "components": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "header",
        "icon",
        "image",
        "input",
        "label",
        "segment",
        "form",
        "grid",
        "menu",
        "message",
        "dropdown",
        "transition"
      ],
      "version": "2.2.4"
    }

【讨论】：

这对我不起作用，使用 npm 的当前最新拉取。一切都还在建造中。
这是正确的答案，我不知道为什么它不适合你