PurgeCSS のシンプルな使い方
PurgeCSS はプロジェクトで使っていない CSS を削除してくれる便利ツールです。
本来は PostCSS や Gulp などのプラグインとして使うのでしょうが、コマンドラインで都度動かすこともできます。
とりあえず使っていないCSSを削除したいときや、簡単に試してみたい時にはこんな方法でいいかもしれません。
環境
- node v10.14.1
- purgecss v4.0.0
デモンストレーション
ディレクトリ構造
index.html
style.css
下記、style.css と index.html を見ていただければわかるのですが、
index.html で使っている css は .mt-50 のみです。
style.css
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.mt-60 {
margin-top: 60px;
}
.mt-70 {
margin-top: 70px;
}
.mt-80 {
margin-top: 80px;
}
.mt-90 {
margin-top: 90px;
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="mt-50">test</p>
</body>
</html>
デモではわかりやすく30行程度の CSS ファイルですが、
ユーティリティ系のスタイルをたくさん準備しておくと実際の作業では 数千〜数万行になることもあるのではないでしょうか。
おそらく全てのスタイルは使いません。
そこで PurgeCSS です。
インストール
npm i -g purgecss
実行
purgecss --css style.css --content index.html --output style.purged.css
オプションの --css は元のCSSファイル、--content は参照先のファイル、--output は書き出しファイルです。
ファイル名、ファイルパスは作業環境に合わせてください。
書き出された CSS ファイル
.mt-50 {
margin-top: 50px;
}
Author And Source
この問題について(PurgeCSS のシンプルな使い方), 我々は、より多くの情報をここで見つけました https://qiita.com/YoshinoriKanno/items/180c75f53009b5f42335著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .