Существует ли аналог gulp uncss для очистки css от лишнего кода в php-шаблонах и учитывающий динамические классы?

Question

[Bastard_Kiton]

Доброго времени суток!
Буду признателен, если подскажете с решением задачи. Есть проект, его каркас\верстка собиралась из модулей админки, в основе которой лежит Twitter Bootstrap. Проект уже довольно большой. Собирался без компоновки страниц в статике, блоки сразу интегрировались в программный код. Появилась необходимость не только использовать "минифаеный" css, но и по-хорошему вырезать кучу лишнего и неиспользуемого кода. Читал про gulp uncss, но на гитхабе сказано следующее

For projects using a framework such as Foundation or Bootstrap you will have to maintain an ignore list for classes that are added by the JS components.

Получается, uncss никак помочь не может. Буду благодарен, если вы подскажете подходящий галп-плагин\связку плагинов или методологию, котораю позволит разрубить этот гордиев узел. :) Спасибо.

Answer 1

[Александр Зачиналов]

Без статики никак. Динамические классы пока не научились отсеивать. Есть способ, но очень муторный. Нужно запускать статику в браузере, копировать исходный код из браузера в новый html, потом активировать все динамические элементы и снова копировать код в тот же html - запускать полученный файл для uncss. Но и этот вариант не даст 100% гарантии, так как в любом фреймворке (да и не только в них) имееются еще и временные классы, которые в коде не остаются, но для правильной работы анимаций необходимы.

Comments

[Bastard_Kiton]

Спасибо! С коллегой примерно к такому же выводу и пришли.

Answer 2

[Владислав]

Почему никак?
Выполняем скрипт по хуку, на стороне сервера. Все классы, которые нужны для эффектов, добавляем в игнор лист. В принципе, настроить 1 раз, и нормально все будет.

.pipe(uncss({
            html: ['index.html'],
                ignore: [
                ".fade",
                ".fade.in",
                ".collapse",
                ".collapse.in",
                ".collapsing",
                ".alert-danger",
                ".open",
                "/open+/"
            ]
        }))

Answer 3

[todorov-png]

Есть вариант с обьединение плагинов

import gulp from 'gulp';
import php2html from 'gulp-php2html';
import phpinc from 'php-include-html';
import htmlmin from 'gulp-htmlmin';
import uncss from 'gulp-uncss';
export function newBuildHTML() {
    return gulp
        .src(['app/buf/success.php', 'app/buf/index.php'])
        .pipe(phpinc({ verbose: true }))
        .pipe(php2html())
        .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
        .pipe(gulp.dest('app/buf'));
}
export function newStylesIndex() {
    return gulp
        .src('./app/scss/style.scss')
        .pipe(scss({ outputStyle: 'compressed' }))
        .pipe(concat('style.min.css'))
        .pipe(
            uncss({
                html: ['./app/buf/index.html'],
                ignore: [
                    '.open',
                    '.is-open',
                    '.opened',
                    '.close',
                    '.show',
                    '.hide',
                    '.active',
                    '.d-none',
                    '.сompleted',
                    '.visible',
                    '.checked',
                    /\.js\-.*/,
                ],
            })
        )
        .pipe(autoprefixer())
        .pipe(gulp.dest('app/buf/css'));
}
export const buildAssembly = gulp.series( newBuildHTML, newStylesIndex);

Если будете использовать Gulp, то разделяйте эти функции и запускайте одна за другой, ибо первая функция асинхронная и она может не успеть выдать фаил до запуска второй функции, тоэтому разбиваем на 2 функции и ждем return