PurgeCSS

Grunt

安裝

npm install grunt-purgecss --save-dev

外掛安裝後，可以在 Gruntfile 中使用這行 JavaScript 啟用

grunt.loadNpmTasks('grunt-purgecss');

「purgecss」工作

概觀

在專案的 Gruntfile 中，將一個名為 purgecss 的區段新增到傳遞給 grunt.initConfig() 的資料物件。

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

類型：字串 | 物件

您可以指定應由 Purgecss 分析的內容，方法是提供一個檔案名稱或 glob 陣列。這些檔案可以是 HTML、Pug、Blade 等。

options.extractors

類型：陣列<物件>

Purgecss 可以根據您的需求進行調整。如果您發現許多未使用的 CSS 沒有被移除，您可能需要使用自訂萃取器。有關萃取器的更多資訊 在此在新視窗中開啟。

options.safelist

您可以指出哪些選擇器可以安全地保留在最終 CSS 中。這可以使用選項 safelist 來完成。

此選項有兩種形式可供使用。

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

在此表單中，安全清單是一個陣列，可以接受字串或正規表示式。

複雜 表單為

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

options.keyframes

類型：boolean 預設值：false

如果您使用 CSS 動畫函式庫，例如 animate.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']
        }
      }
    }
  });