在 Fomantic-UI（原 Semantic-UI） 中通过编译去除 emoji 组件

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

标签：Semantic,Fomantic,themes,source,UI,components,dist,semantic
来源： https://www.cnblogs.com/xwgli/p/14309727.html