neputa note

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

初稿:

更新:

- 3 min read -

#CSS #Node.js
img of PurgeCssで複数のhtmlファイルの不要CSSセレクタを削除する

PurgeCssとは

PURGECSS IS A TOOL TO REMOVE UNUSED CSS.（PURGECSSは未使用のCSSを削除するツールです。） — INTRODUCTION | PURGECSS

記事概要

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

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

Ubuntu22.04 on WSL2 にnode.jsとnpmの最新バージョンをインストールする

不要なCSSを整理するツール「PurgeCss」を使ってみたいと思ったがnode.js、npmの環境が必要である。だがUbuntuのリポジトリにあるnodejsのバージョンが古い。よって新しいバージョンをインストールするまでの手順を備忘録として記す。

favicon for blog card www.neputa-note.net

作業環境

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ディレクトリに移動し作業を行うとする。

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

ここで以下を実行する。

code
purgecss --css styles.css --content index.html --out build/

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

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

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

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

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

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

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

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

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

code
module.exports = {
  // PurgeCSSの設定をここに記述
  content: ['./public/**/*.html'], // PurgeCSSが探索するHTMLファイルのパス
  css: ['./public/assets/**/*.css'] // PurgeCSSが処理するCSSファイルのパス

  // その他の設定をここに追加
}

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

code
purgecss --config purgecss.config.js --output build/

まとめ

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

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

参考サイト

#CSS #Node.js

目次