原来的 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 中获取到新的文件。