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


    输了你,赢了世界又如何...
  • 相关阅读:
    一段自己写的丑陋的表单验证代码
    简单的星级评价
    有个项目
    好久没写了,重装了系统重新配置的Live Writer,看看效果:
    XmlHttpRequest调用Webservice的一点心得
    局域网共享怎么设置?我想把其中一个电脑的F盘共享?
    TCP/IP协议详解
    input file实现多张图片上传
    .NET C#中如何备份SQL数据库
    CSS中cursor鼠标形状属性列表
  • 原文地址:https://www.cnblogs.com/xwgli/p/14309727.html
Copyright © 2020-2023  润新知