MODX Revolutionプラグイン【ModxMinify】で複数CSSを結合・圧縮する

MODX Revolutionの【ModxMinify】というプラグインを使って複数のCSSファイルを結合・圧縮するメモです。

以前、PHPで複数のCSSを結合・圧縮することを試し、このサイトではスニペットを作成してCSSファイルを圧縮させるようにしていました。

PHPで複数のcssファイルを結合して圧縮する

GoogleのPageSpeed Insightsでサイトの表示スピードを測定したら「CSSを最適化してね!」と言われました。調べたところ、CSSファイルを圧縮することが改善策のようだったので、対処法を考えました。

しかし、元のCSS(結合前)を修正してもキャッシュの関係なのか、すぐに反映されず少し使い勝手が悪かったので、もっといい方法がないかと調べていたところ【ModxMinify】というプラグインを見つけました。

MODX Minifyは、CSS、SCSS、LESS、およびJSファイルをグループ化および縮小するMODX Revolution Extraです。

ModxMinify 1.0.1-pl

アイコンフォント用のCSSも文字化けしませんでした。
ちなみにjsは試してみましたが、エラーが出たので使うのを止めました。SCSSとLESSは試していません。

ModxMinifyの設定

ModxMinifyをインストール

パッケージマネージャーからModxMinifyをダウンロードし、インストールする。

Add Group

CSSファイルのグループを作成。

Group name
CSSグループの名前(例:default)
Description
グループの説明(例:デフォルト使用のCSS)

Add File

②で作成したグループにCSSファイルを追加していく。

Group
任意のグループを選択(例:default)
Filename
圧縮したいCSSファイルを追加。
複数ある場合は改行で1行に1ファイル。
ちなみにサイトのディレクトリ以下にあるファイルのみ対応のようで、googleフォントやCDNなどの外部URLは相手にしてくれなかった。

スニペットの呼び出し

スニペットは[[!modxMinify]]で、作成した全てのグループを結合する。
グループを指定する場合は[[!modxMinify? &group=`css,css2`]]と記入する。この場合はcsscss2というグループが結合される。

実際にスタイルシートとして使う場合はテンプレートの<head>内に次のように追加する。

<link rel="stylesheet" type="text/css" href="[[!modxMinify? &group=`css`]]" />

圧縮されたファイルはassets/components/modxminify/cachestyle-×-×××××××××××.min.cssとしてキャッシュされています。

元ファイルを変更した時やMODXのキャッシュを削除した時に新しいstyle-×-×××××××××××.min.cssが作成されるようです。