Rimuovere i moduli/componenti inutilizzati dalla build dell'interfaccia utente Semantic

Question

dopo aver cercato per molto tempo, non ho trovato alcuna soluzione adatta alla corrente interfaccia utente Semantic 2.0.

La domanda è: come rimuovere componenti e moduli inutilizzati dal mio build JS/CSS? Sto usando circa 1/4 di tutte le funzionalità, c'è un modo semplice per ridurre le dimensioni del file? Sembra che il modo di aggiungere/rimuovere elementi da semantic.json non funzioni più.

Grazie, H.G.

Answer 1

Questo può essere fatto durante il processo di installazione del Semantic UI. Hai letto Install Semantic UI?

V'è raffigurato che si potranno eseguire

npm install semantic-ui --save 

per avviare lo script di installazione.

Viene richiesto quale tipo di installazione si desidera eseguire (automatico, espresso, personalizzato). Se si sceglie "Personalizzato", verrà richiesto quali componenti installare Semantic UI con.

Naturalmente, questo significa che dovrai sapere in anticipo quali componenti farai, durante il tuo sviluppo. Ho scelto il modo di installare completamente Semantic UI e rieseguire di nuovo il processo di installazione, ora estrapolando i componenti da installare, una volta che il progetto è pronto per il rilascio.

Cordiali saluti, Sascha.

Answer 2

Ecco come personalizzare le componenti:

• Modificare il file semantic.json per mettere a punto l'elenco dei componenti. Se è stata selezionata l'installazione predefinita che installa tutti i componenti, non ci sarà la sezione componenti in questo file JSON, mentre si è liberi di aggiungerla manualmente.

• Vai alla semantica directory (che è project_root/semantica di default), ed eseguire due comandi gulp:

  1. gulp clean
  2. gulp build

Allora la semantica sarebbe ricostruita con la tua ultima lista dei componenti. Di seguito è riportato un esempio di riferimento:

{ 
     "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, 
     "components": [ 
     "reset", 
     "site", 
     "button", 
     "container", 
     "divider", 
     "header", 
     "icon", 
     "image", 
     "input", 
     "label", 
     "segment", 
     "form", 
     "grid", 
     "menu", 
     "message", 
     "dropdown", 
     "transition" 
     ], 
     "version": "2.2.4" 
    }