Angular 删除Fomantic UI（语义UI分叉）中未使用的CSS/JS

我使用的是Fomantic UI，一种带有Gulp的语义UI的更新版本。 我在这里遵循了教程：

这是我的semantic.json文件：

{
  "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,
  "version": "2.7.2",
  "components": [
    "reset",
    "site",
    "button",
    "container",
    "divider",
    "header",
    "icon",
    "image",
    "input",
    "label",
    "list",
    "segment",
    "breadcrumb",
    "form",
    "grid",
    "menu",
    "message",
    "table",
    "ad",
    "card",
    "comment",
    "feed",
    "item",
    "accordion",
    "checkbox",
    "dimmer",
    "dropdown",
    "modal",
    "popup",
    "sidebar",
    "visibility"
  ]
}

我限制了我的“组件”列表以满足我的需要。 每次我进行

gulpbuild

时，semantic.min.css和semantic.min.js文件的大小都相同（css为755ko，js为338ko），即使我删除了JSON列表中的组件。 我不想一个接一个地导入CSS和JS导入组件文件

我还注意到一个奇怪的错误：当我在dist存储库中删除下面的两个文件时，Gulp不会再次创建它们。所以我想我在这个过程中错过了一些东西

有人能帮我吗？

---

非常感谢

要删除未使用的CSS文件，可以安装purifyCSS:

npm i -D gulp gulp-purifycss

例如，在Angular project的根目录中创建

gulpfile.js

，并添加以下代码：

const gulp = require('gulp');
const purify = require('gulp-purifycss');

gulp.task('purifyCSS', () => {
  return gulp
    .src('./dist/*/styles.*.css')
    .pipe(
      purify(['./src/app/**/*.ts', './src/app/**/*.html'], {
        info: true, // Outputs reduction information (like in the screenshot above)
        minify: true, // Minifies the files after reduction
        rejected: false, // Logs the CSS rules that were removed
        whitelist: ['*transition*', '*dimmer*'] // Ignored css classes
      })
    )
    .pipe(gulp.dest('./dist/'));
});

使用以下工具构建web应用程序后：

ng build --prod

运行：

---

自动删除未使用的css。

当前版本的Fomantic UI 2.8.2有一个附加文件

variation.variables

，您可以在其中将不需要的组件变量设置为

false

，这样它们就不会被编译，从而减少了生成的总体css 由于Fomantic UI 2.7.0，在调整/减少中心

colors.less

文件中所需的颜色时，您还可以大幅减少生成的CSS

npx gulp purifyCSS