Grunt

インストール

npm install grunt-purgecss --save-dev

プラグインがインストールされたら、次の JavaScript コードを Gruntfile に記述して有効にできます。

grunt.loadNpmTasks('grunt-purgecss');

"purgecss" タスク

概要

プロジェクトの Gruntfile で、grunt.initConfig() に渡されるデータオブジェクトに purgecss という名前のセクションを追加します。

grunt.initConfig({
    // Configuration to be run (and then tested).
    purgecss: {
      my_target: {
        options: {
          content: ['./src/**/*.html']
        },
        files: {
          'dist/app.css': ['src/css/app.css']
        }
      }
    }
  });

オプション

purgecss のすべてのオプションは、プラグインで使用できます。以下に主なオプションを示します。完全なリストについては、Purgecss ドキュメントサイトを参照してください。

options.content

型: string | Object

Purgecss で分析するコンテンツを、ファイル名またはグロブの配列で指定できます。ファイルは HTML、Pug、Blade などを使用できます。

options.extractors

型: Array<Object>

Purgecss はニーズに合わせて調整できます。未使用の CSS が多数削除されていないことに気付いた場合は、カスタムエクストラクターを使用することをお勧めします。エクストラクターの詳細については、こちらを参照してください。

options.safelist

最終的な CSS に残しておくことが安全なセレクターを指定できます。これは、safelist オプションを使用して実現できます。

このオプションには2つの形式があります。

safelist: ['random', 'yep', 'button', /^nav-/]

この形式では、safelist は文字列または正規表現を受け入れることができる配列です。

複合形式は次のとおりです。

safelist: {
    standard: ['random', 'yep', 'button', /^nav-/],
    deep: [],
    greedy: [],
    keyframes: [],
    variables: []
}

options.keyframes

型: boolean デフォルト値: false

animate.css などの CSS アニメーションライブラリを使用している場合は、keyframes オプションを true に設定することで、未使用のキーフレームを削除できます。

options.fontFace

型: boolean デフォルト値: false

CSS に未使用の @font-face ルールがある場合は、fontFace オプションを true に設定することで削除できます。

例

以下の例では、利用可能なすべての主要オプションを使用しています。

grunt.initConfig({
    // Configuration to be run (and then tested).
    purgecss: {
      my_target: {
        options: {
          content: ['./src/**/*.html', `src/**/*.js`, 'src/**/*.blade', 'src/**/*.vue'],
          extractors: {
            extractor: class {
                static extract(content) {
                    content.match(/a-Z/) || []
                }
            },
            extension: ['html', 'blade']
          },
          safelist: ['random', 'yep', 'button', /red$/],
          keyframes: true,
          fontFace: true
        },
        files: {
          'dist/app.css': ['src/css/app.css']
        }
      }
    }
  });