Удалите неиспользуемые CSS / JS в Fomantic UI (разветвление Semantic UI) - PullRequest
Новая
       20

Удалите неиспользуемые CSS / JS в Fomantic UI (разветвление Semantic UI)

0 голосов
/ 03 апреля 2019

Я использую Fomantic UI, обновленную версию Semantic UI с Gulp. Я следовал этому руководству здесь: https://fomantic -ui.com / Введение / build-tools.html

Вот мой файл 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"
  ]
}

Я ограничил свой список "компонентов" в соответствии со своими потребностями. Каждый раз, когда я создаю gulp build, файлы semantic.min.css и semantic.min.js имеют одинаковый размер (755 Ko для CSS и 338 Ko для JS), даже если я удаляю компоненты из списка JSON. Я не хочу импортировать мои CSS и JSS один за другим, импортируя файлы компонентов ...

Я также заметил странную ошибку: когда я удаляю два файла ниже в моем дистрибутиве dist, Gulp не создает их снова. Поэтому я думаю, что что-то пропустил в процессе ...

Может кто-нибудь помочь мне, пожалуйста? Большое спасибо!

1 Ответ

0 голосов
/ 03 мая 2019

Для удаления неиспользуемых CSS-файлов вы можете установить cleanyCSS: 

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/'));
});

После создания веб-приложения: 

ng build --prod

пробег: 

npx gulp purifyCSS

для автоматического удаления неиспользуемых CSS.

...