2017-10-20 12 views
4

Je dois extraire le CSS utilisé à partir d'un fichier CSS de 19 000 lignes dont 98,4% est inutilisé (aïe). Je sais que vous pouvez utiliser les outils de développement Google Chrome pour voir la couverture CSS, comme ceci:Extrait utilisé CSS à partir d'une page

enter image description here

Mais cela ne vous permet pas de sauter même aux lignes vertes. Passer manuellement les lignes 19K ne semble pas faisable.

Chrome phare ne semble pas vous donner une option pour ne voir que les règles dont vous avez besoin comme outils de développement utilisés pour, non plus. J'ai essayé le module complémentaire "CSS Usage" de Firefox (que beaucoup de sites recommandent) mais il nécessite FireBug, lui-même non compatible avec la version actuelle de FireFox.

Quelqu'un peut-il penser à un moyen de sortir seulement le CSS qui est utilisé d'une manière ou d'une autre?

+1

avez-vous un coup d'oeil à htt ps: //github.com/purifycss/purifycss déjà? –

+0

_ "mais il nécessite FireBug, lui-même non compatible avec la version actuelle de FireFox" _ - dommage que toutes les anciennes versions de Firefox aient été complètement effacées du net, sinon de la mémoire de l'humanité ... dammit, si seulement quelque chose comme https://ftp.mozilla.org/pub/firefox/releases/ existait. – CBroe

+0

J'ai posé la même question -> https://stackoverflow.com/questions/44633247/how-to-save-the-results-analysed-by-the-chromes-coverage-tool :) j'espère que vous aurez plus de chance! – Morpheus

Répondre

2

Espérons que cela vous aidera

https://uncss-online.com/

ajouter simplement html à gauche et à droite dans css. Cliquez sur ok btn puis voir magique

S'il y a une erreur dans css, il vous sera demandé de supprimer cette erreur dans ce numéro de ligne.

C'est le plus facile :) Methode

+1

Cela a sorti quelques trucs bizarres, mais il a également sorti quelques bonnes choses. Certainement une amélioration si vous êtes coincé. –

2

J'utilise PurifyCSS pour certains de mes projets. Ça m'aide à garder mon CSS léger.

Dont » connaître la structure de votre projet et flux de travail, mais il y a des tonnes de tutoriels là-bas:

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

https://survivejs.com/webpack/styling/eliminating-unused-css/

Il y a aussi quelques solutions en ligne pour se débarrasser des CSS utilisé, jamais essayé si:

https://uncss-online.com/

+0

Conseil: Il est toujours préférable d'expliquer plutôt que de publier des liens externes, car ces liens disparaîtront plus tôt que vous ne le pensez! –

+0

Cela a du sens. Je vais garder cela à l'esprit. Merci Chuck. –