PurgeCSS

CLI

PurgeCSS はコマンドラインインターフェイスで使用できます。CLI は単独または設定ファイルを使用して使用できます。

インストール

PurgeCSS を dev 依存関係としてインストールして npx で CLI を使用するか、PurgeCSS をグローバルにインストールできます。

npm i -g purgecss

使用法

CLI で使用可能なオプションを表示するには: purgecss --help

Usage: purgecss --css <css...> --content <content...> [options]

Remove unused css selectors

Options:
  -V, --version                        output the version number
  -con, --content <files...>           glob of content files
  -css, --css <files...>               glob of css files
  -c, --config <path>                  path to the configuration file
  -o, --output <path>                  file path directory to write purged css files to
  -font, --font-face                   option to remove unused font-faces
  -keyframes, --keyframes              option to remove unused keyframes
  -v, --variables                      option to remove unused variables
  -rejected, --rejected                option to output rejected selectors
  -rejected-css, --rejected-css        option to output rejected css
  -s, --safelist <list...>             list of classes that should not be removed
  -b, --blocklist <list...>            list of selectors that should be removed
  -k, --skippedContentGlobs <list...>  list of glob patterns for folders/files that should not be scanned
  -h, --help                           display help for command

CLI で使用できるオプションは、設定ファイルで利用できるオプションと似ています。CLI を設定ファイルでも使用できます。

--css

purgecss --css css/app.css css/palette.css --content src/index.html

--content

PurgeCSS で分析するコンテンツを、ファイル名の配列または グロブ新規ウィンドウで開く で指定できます。これらのファイルは HTML、Pug、Blade などです。

purgecss --css css/app.css --content src/index.html src/**/*.js

--config

設定ファイルを使用して CLI を使用できます。設定ファイルへのパスを指定して --config または -c を使用します。

purgecss --config ./purgecss.config.js

--output

既定では、CLI はコンソールに出力を表示します。CSS をファイルとして返す場合は、浄化された CSS ファイルを書き込むディレクトリを指定します。

purgecss --css css/app.css --content src/index.html "src/**/*.js" --output build/css/

--safelist

PurgeCSS による特定の CSS セレクターの削除を防ぐには、そのセレクターをセーフリストに追加できます。

purgecss --css css/app.css --content src/index.html --safelist classnameToSafelist