Question

我使用Fomantic UI，这是带有Gulp的Semantic UI的更新版本。我在这里遵循了该教程：https://fomantic-ui.com/introduction/build-tools.html

这是我的语义.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"
  ]
}

我已经限制了“组件”列表以适合我的需求。每次我制作一个gulp build时，即使我删除了JSON列表中的组件，semantic.min.css和semantic.min.js文件的大小也相同（CSS为755 Ko，JS为338 Ko）。我不想一个接一个地导入组件文件来导入我的CSS和JSS ...

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

有人可以帮我吗？非常感谢！

Answer 1

当前版本的Fomantic-UI 2.8.2还有一个附加文件variation.variables，您可以在其中将不需要的组件变化设置为false，这样就不会编译它们，从而减少了总体生成的CSS 从Fomantic-UI 2.7.0开始，您可以在调整/减少中央colors.less文件中的所需颜色

时大大减少生成的CSS

Answer 2

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

npm i -D gulp gulp-purifycss

例如，在Angular项目的根目录中，创建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

运行：

npx gulp purifyCSS

自动删除未使用的CSS。

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

2 个答案: