Question

经过长时间的搜索，我找不到适合当前Semantic UI 2.0的解决方案。

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

谢谢， H.G。

Answer 1

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

有描述你将执行

npm install semantic-ui --save

启动安装脚本。

系统将询问您要运行的设置类型（自动，快速，自定义）。如果您选择＆＃34;自定义＆＃34;，系统将提示您安装语义UI的组件。

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

亲切的问候，的Sascha。

Answer 2

以下是如何自定义组件：

编辑 semantic.json 文件以微调组件列表。如果您选择了安装所有组件的默认安装，则此json文件中不会有组件部分，您可以手动附加它。
转到语义目录（默认情况下为 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"
    }

从Semantic UI构建中删除未使用的模块/组件

2 个答案: