摘要：
原来的Semantic-UI已经基本不怎么维护了，现在社区重新改名维护了一套Fomantic-UI，东西还都是一样的。
原来的 Semantic-UI 已经基本不怎么维护了，现在社区重新改名维护了一套 Fomantic-UI，东西还都是一样的。
最近新增了一个 emoji 组件，导致整体打包的 css 文件体积变大，但是平时可能几乎用不到，以下是寻找了一下去除的方法，也同样适用于需要定制组件打包的情况：
1、根据官方文档：https://fomantic-ui.com/introduction/build-tools.html#30-second-explanation
需要先下载 Fomantic-UI 的完整源代码，并且在本地环境有安装 gulp 工具
2、先进行一次 gulp build，会发现在根目录下生成有 semantic.json，或者直接将 semantic.json.example 文件改为 semantic.json 来进行配置
3、根据官方文档：https://fomantic-ui.com/introduction/build-tools.html#semanticjson
在此文件中可以对打包的组件进行配置，以下是完整的配置列表：
{ //base path added to all other paths specified in "paths" "base": "", //current version of Fomantic UI "version": "2.8.7", "paths": { "source": { //source theme.config "config" : "src/theme.config", //source definition folder "definitions" : "src/definitions/", //source site theme "site" : "src/site/", //source themes folder "themes" : "src/themes/"}, "output": { //packaged source (both compressed/uncompressed) "packaged" : "dist/", //uncompressed source "uncompressed" : "dist/components/", //compressed source "compressed" : "dist/components/", //output directory for theme assets "themes" : "dist/themes/"}, //directory for gulp clean task "clean" : "dist/"}, //when set to an integer permission, will set dist files with this file permission "permission" : false, //whether gulp watch/build should run RTLCSS "rtl": false, //will only include components with these names "components": [ "reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "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", "state", "visibility", "text", "calendar", "slider", "toast", "emoji"], //generate .css/.js files for individual components (under /dist/components), but exclude them from semantic.css and semantic.js "individuals": [ "form", "modal", "step", "emoji ], // whether to include special project maintainer tasks "admin": false }
4、将配置文件中最后的 emoji 去除后，重新 build 即可在 dist 中获取到新的文件。