Блог

Я использую Fomantic UI, обновленную версию Semantic UI с Gulp. Я следовал руководству здесь:https://fomantic-ui.com/introduction/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 не создает их снова. Поэтому я думаю, что я что-то упустил в процессе…

Кто — нибудь мог бы мне помочь , пожалуйста ? Большое спасибо !

Текущая версия Fomantic-UI 2.8.2 имеет дополнительный файл, variation.variables в котором вы можете задать нежелательные вариации компонентов, false чтобы они не компилировались, уменьшая общий сгенерированный CSS, начиная с Fomantic-UI 2.7.0. вы также можете сильно уменьшить сгенерированный CSS при настройке / уменьшении необходимых цветов в центральном colors.less файле

Для удаления неиспользуемых файлов 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/'));
});
  

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

 ng build --prod
  

выполнить:

 npx gulp purifyCSS
  

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