PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法

Post on:2019年9月26日

はじめに

PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。

未使用のCSSを削減しよう

私はしばらくの間、CSSファイルから未使用のスタイルを削除できるツールを探していました。なぜこの種のツールを探していたと思いますか？最近では、ほとんどのデベロッパーが多くのCSSフレームワークやライブラリを使用しているため、CSSファイルのサイズが肥大化することを避けられません。

しかし、それらのフレームワークやライブラリのCSSファイルで実際に使用するスタイルはどの程度でしょうか。時には、20%以下の場合もあります。使用しないスタイルはあなたのWebページに必要でしょうか。

PurgeCSSとは

PurgeCSSとは未使用のスタイルをCSSファイルから削除するためのツールで、制作のワークフローの一部として使用できます。

PurgeCSSの流れは、下記の通りです。

クリーニングしたいCSSファイル
そのCSSが適用されるHTMLファイル
生成された新規CSSファイルのパス

CSSファイル（1）からHTMLファイル（2）を検索し、そこから実際に使用したスタイルのみを持つ新しいCSSファイル（3）を生成します。

実際に試してみると、CSSのサイズを60%以上に削減できると思います。

追記（2020/1/20）

PurgeCSS 2.0が、2020/1/19にリリースされました。
主な変更点は下記の通りです。

PurgeCSSの新しいバージョンはTypescriptで記述。
PurgeCSSの以前のバージョンは同期して動作しましたが、新しいバージョンは非同期に動作します。これにより、実行時間が少なくなります。
font-face, keyframeでの不具合に対応。
CSS変数に対応。
NodeJS <8のサポートをドロップ。

ビルドツール

PurgeCSSの素晴らしい点は、一般的な多くのビルドツールを使用して制作ワークフローに組み込めることです。

CLI
JavaScript API
Webpack
Gulp
Rollup

JavaScriptフレームワーク

また、JavaScriptフレームワークでも使用できます。

React
Vue
Next
Nuxt

PurgeCSSの使い方

以前私は、gulpでCSSビルドプロセスをセットアップする方法について記事を書きました。その際に、PurgeCSSを使用しているので、ビルドプロセスに興味がある場合は参考にしてください。
参考: Setting up a CSS build process with Gulp

この記事では、PurgeCSSをgulpおよびNuxt.jsで実装する方法を説明します。その他のさまざまな実装方法については、PurgeCSSの公式ドキュメントをご覧ください。

PurgeCSSをgulpで実装する方法

最初に、npmまたはyarnでパッケージをインストールします。

npm i -D gulp-purgecss

1	npm i -D gulp-purgecss

または、

yarn add gulp-purgecss

1	yarn add gulp-purgecss

gulpfile.jsで、追加したパッケージをインポートします。

const gulp = require('gulp'),
      purgecss = require('gulp-purgecss');

1 2	const gulp = require('gulp'), purgecss = require('gulp-purgecss');

あとは、下記のようにタスクを作成するだけです。

gulp.task('purgecss', () => {
  return gulp
    .src('src/**/*.css')
    .pipe( 
      purgecss({
        content: ['src/**/*.html']
      })
    )
    .pipe(gulp.dest('build/'))
})

gulp.task('purgecss', () => {

return gulp

.src('src/**/*.css')

.pipe(

purgecss({

content: ['src/**/*.html']

})

)

.pipe(gulp.dest('build/'))

})

タスクを直列または連続して実行している場合は、HTMLファイルを生成した後にこのタスクを実行することを忘れないでください。そうしないと、タスクはエラーを生成してしまいます。

PurgeCSSをNuxt.jsで実装する方法

PurgeCSSがHTMLファイルを扱っているのを最初に見た時、動揺しました。私はNuxt.jsでさまざまなプロジェクトを開発しており、私にとってファイルを最適化することは非常に重要です。しかし、ドキュメントを読むと、PurgeCSSをReactやVueやNextやNuxtなどのJavaScriptフレームワークで実装できることが分かりました。

Nuxt.jsのプロジェクトでPurgeCSSを使用する方法を見てみましょう

最初に、下記のパッケージをnpmまたはyarnでプロジェクトにインストールします。

npm i --save-dev glob-all purgecss-webpack-plugin

1	npm i --save-dev glob-all purgecss-webpack-plugin

または、

yarn add glob-all purgecss-webpack-plugin

1	yarn add glob-all purgecss-webpack-plugin

nuxt.config.jsでインポートします（エクスポートのデフォルト以外）。

import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'
import path from 'path'

import PurgecssPlugin from 'purgecss-webpack-plugin'

import glob from 'glob-all'

import path from 'path'

エクスポートのデフォルト内で、ビルド構成にこれを追加します。

build: {
  extractCSS: true,
  extend(config, { isDev, isClient }) {
    if (!isDev && isClient) {
      config.plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
            path.join(__dirname, './pages/**/*.vue'),
            path.join(__dirname, './layouts/**/*.vue'),
            path.join(__dirname, './components/**/*.vue')
          ]),
          whitelist: ['html', 'body']
        })
      )
    }
  }
}