purifyCss webpack configuration example with MaterializeCSS Framework for Laravel Framework 5.7

readme_en.md

purifyCss webpack configuration example with MaterializeCSS Framework for Laravel Framework 5.7

Installing

You must install the following dependencies:

"glob-all": "^3.1",
"purify-css": "^1.2",
"purifycss-webpack": "^0.7",

glob and path are needed for use in the configuration, namely, to compose an absolute path to search for files.

Module path does not need to be installed, as it comes with node.js.

Settings

All file extensions to scan are listed:

moduleExtensions: ['php', 'vue', 'js'],

Specify the path with a mask to scan:

paths: []

Since the script only scans the above files, it may be unaware of some classes and delete. For this there is a "whitelist" - indicates which classes do not need to be deleted.

purifyOptions: {
  whitelist: []
}

Displays a list of deleted classes in the console:

rejected: true

readme_ru.md

Пример конфигурации purifyCss webpack с CSS-фреймворком MaterializeCSS для PHP-фреймворка Laravel 5.7

Установка

Необходимо установить следующие зависимости:

"glob-all": "^3.1",
"purify-css": "^1.2",
"purifycss-webpack": "^0.7",

glob и path нужны для использования в конфигурации, а именно для составления абсолютного пути для поиска файлов.

Модуль path не нужно подключать дополнительно, так как он идет "из коробки" в node.js.

Настройка

Указываются все расширения файлов, которые нужно сканировать:

moduleExtensions: ['php', 'vue', 'js'],

Указываются пути с маской для сканирования:

paths: []

Так как скрипт сканирует только указанные выше файлы, некоторые классы он может не знать и удалить. Для этого есть "белый лист" - указывает какие классы не нужно удалять.

purifyOptions: {
  whitelist: []
}

Выводит в консоль список удаленных классов:

rejected: true

package.json

{
    "devDependencies": {
        "glob-all": "^3.1",
        "laravel-mix": "^4.0",
        "purify-css": "^1.2",
        "purifycss-webpack": "^0.7",
    }
}

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
const glob = require('glob-all');

const assets = './resources/';

mix
    .options({
        purifyCss: {
            moduleExtensions: ['php', 'vue', 'js'],
            paths: glob.sync([
                path.join(__dirname, 'resources/**/*.blade.php'),
                path.join(__dirname, 'resources/**/*.vue'),
                path.join(__dirname, 'resources/**/*.js')
            ]),
            purifyOptions: {
                whitelist: [
                    'active', '*dropdown-content*', '*select-dropdown*', '*select-wrapper*', 'material-icons', '*material-icons.mi*', 'toast', 'progress*',
                    '*waves-light', '*type=checkbox*', '*switch*', 'loader*', '*chip*', '*indicators*', '*ymaps*', 'sidenav-overlay'
                ],
                rejected: true
            }
        }
    })

    .sass(assets + 'sass/app.scss', 'public/css')
    .js(assets + 'js/app.js', 'public/js')
    .extract()

    .version()
    .sourceMaps();

Link for documentation: https://github.com/webpack-contrib/purifycss-webpack