编程

Vite 插件 —— 在 Laravel 中使用 Purgecss

426 2023-10-15 01:20:00

这是一个 Vite 插件,集成了 PurgeCSS  和 Laravel 10/9 模板资源。

该插件会只在生产模式下对资源进行清理 (yarn build/npm run build)。

安装

yarn

yarn add -D @erbelion/vite-plugin-laravel-purgecss

npm

npm i -D @erbelion/vite-plugin-laravel-purgecss

使用

在 Vite 配置中使用插件(vite.config.ts)

import purge from '@erbelion/vite-plugin-laravel-purgecss'

export default {
    plugins: [
        laravel(...),
        purge({
            templates: ['blade']
        })
    ]
}

更多示例

选项

参数类型描述
templates?string[]List of ready paths to be processed by PurgeCSS. See below.
paths?string[]List of paths to be processed by PurgeCSS.
safelist?UserDefinedSafelistCheck available safelist options in PurgeCSS docs.
extractors?Extractors[]Check available extractors options in PurgeCSS docs.

模板

参数处理路径
bladeresources/views/**/*.blade.php
svelteresources/{js,views}/**/*.svelte
vueresources/{js,views}/**/*.vue
reactresources/{js,views}/**/*.{tsx,ts,jsx,js,html}
angularresources/{js,views}/**/*.html

通过 paths 选项,你也可以提供自定义路径。

其他示例

Vue 使用 template 选项:

purge({
    templates: ['blade', 'vue']
})

通过自定义路径:

purge({
    paths: ['resources/views/**/*.blade.php']
})

使用自定义 paths + 保留 #bruh.nice-buttonh1 样式: 

purge({
    paths: [
        'resources/views/**/*.blade.php',
        'resources/{js,views}/**/*.vue'
    ],
    safelist: ['bruh', 'nice-button', 'h1']
})

修复转义前缀的示例配置 (sm:, lg:, 等):

purge({
    paths: [
        'resources/views/**/*.blade.php',
        'resources/{js,views}/**/*.vue'
    ],
    extractors: [
        {
            extractor: (content) => {
                return content.match(/[a-z-_:\/]+/g) || []
            },
            extensions: ['php', 'vue', 'html']
        }
    ]
})