複数のhtmlファイルを対象にPurgeCssで不要なCSSセレクタを削除する

PurgeCssとは

PurgeCSS is a tool to remove unused CSS.（PurgeCSSは未使用のCSSを削除するツールです。）
――Introduction | PurgeCSS

記事概要

前回作業でインストールしたPurgeCssを実際に使ってみたので手順をまとめる。

PurgeCssを使用するにはnode.js、npmが必要となる。環境構築の手順は以下記事にまとめている。

作業環境

OS

Ubuntu 22.04.4 LTS（WSL2 on Windows11 Proで作動）

node.js

v20.12.1

PurgeCss

v6.0.0

作業詳細

単一のhtmlファイルを対象にPurgeCssを実行する

PurgeCssはコマンドで処理を行う。

PurgeCssはhtmlとcssファイルを解析し、不要なセレクタを削除した新たなcssファイルを出力する。

例えば、index.htmlとstyle.cssが同階層に配置してあるrootディレクトリに移動し作業を行うとする。

root/
  ├ build/
　├ index.html
　└ style.css

ここで以下を実行する。

PurgeCssを実行purgecss --css styles.css --content index.html --out build/

そうすると、buildディレクトリに不要なセレクタを削除したstyle.cssが作成される。

出力ファイル名を変えたい場合は、outputパラメータをbuild/style.purged.cssなどとする。

複数のhtml、cssファイルを対象にPurgeCssを実行する

これが今回やりたかったこと。

rootディレクトリ内にあるすべてのhtml、cssを対象にまとめて処理を行う。

例えば多階層に存在するhtmlをすべて解析することを想定し、設定ファイルを準備する。

root/
  ├ assets/
  │  └ css/
  │      ├ style.css
  │      └ color.css
  ├ index.html
  ├ 404.html
  └ sub/
      ├ help.html
      └ about.html

rootディレクトリの一つ上の階層で作業を行うとする。

ここにpurgecss.config.jsという名前で設定ファイルを以下の通り作成する。

purgecss.config.jsmodule.exports = {
// PurgeCSSの設定をここに記述
content: ['./public/**/*.html'], // PurgeCSSが探索するHTMLファイルのパス
css: ['./public/assets/**/*.css'], // PurgeCSSが処理するCSSファイルのパス
// その他の設定をここに追加
};

そしてbuildディレクトリを準備し、以下コマンドを実行するとbuildディレクトリ内に処理済みのstyle.cssとcolor.cssが作成される。

PurgeCssを実行purgecss --config purgecss.config.js --output build/

まとめ

今回、静的サイトのファイルに対しPurgeCssで容易にCSSの整理ができることが確認できた。

次はBlogなど動的コンテンツのサイトで良い方法がないか考える。