Можно ли автоматом вынуть из файла CSS-фреймворка только нужные фрагменты?

Question

[perfiliy]

Есть определенный CSS фреймворк с кучей стилей на все случаи жизни внутри. И на сайте этого фреймворка есть пример готовой верстки в HTML-файле. Вопрос: можно ли с помощью каких-то плагинов (или как еще, но не вручную) вынуть из файла CSS только те стили, которые присутствуют в этом сверстанном HTML-файле примера, чтобы убрать кучу лишнего кода? Вручную это делать неудобно, мучительно долго и можно что-то пропустить/незаметить.
Спасибо всем откликнувшимся.

Answer 1

[Михаил]

purgecss

Comments

[perfiliy]

Спасибо, буду разбираться что это такое. Владею темой на уровне верстальщика, не дальше.

[Михаил]

perfiliy, веостальщик про такое должен знать

[perfiliy]

Михаил, это хобби, поэтому не так глубоко.

Читаю статью по установке:

Для начала необходимо установить пакет PurgeCSS с помощью npm или yarn

npm i -D gulp-purgecss
или

yarn add gulp-purgecss
Затем импортируйте добавленный пакет в своем gulpfile.js:

const gulp = require('gulp'),
purgecss = require('gulp-purgecss');
Потом создайте задачу подобную этой:

gulp.task('purgecss', () => {
return gulp
.src('src/**/*.css')
.pipe(
purgecss({
content: ['src/**/*.html']
})
)
.pipe(gulp.dest('build/'))
})

Я вообще не понимаю что это такое.))

[perfiliy]

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

[Михаил]

perfiliy, npm, node, gulp? Не знакомые словечки?
Да у вас проблемки

[perfiliy]

А то! Хотел посадить простенький сайтец на готовый шаблон без мусора в верстке, а тут такое. Буду разбираться.

[Alex]

perfiliy, https://metanit.com/web/nodejs/1.1.php
https://www.hostinger.ru/rukovodstva/chto-takoe-npm/
https://webkyrs.info/page/chto-takoe-gulp-i-zachem...

Answer 2

[posters]

Все популярные css фреймворки имеют исходники под препроцессоры. Работайте с ними через сборщик, вроде gulp, и лишнего в ваш css файл не попадет.

Answer 3

[perfiliy]

Отвечу сам себе. Нашел онлайн-сервис purifycss.online
Вроде, то что нужно.

Comments

[strelok011]

это зло а не решение.

Если отдавать верстку - таким пользоваться нельзя. Будут выпилены стили, которые должны работать в других случаях, которые еще не запланированы.
Читайте про gulp, sass / less - сборка результата в авторежиме. Можно css фреймворк собирать помодульно в конечный файл стилей.
Это не сложно, за пару часов можно освоить и развернуть решение.

ПыСы Верстал более 5 лет, если что, много всего перепробовал.

[perfiliy]

strelok011, так я же и хотел выпилить всё запланированное, но в моем случае не задействованное. Потом можно вручную добавить какие-то фрагменты, скопировав их из оригинального css. Но спасибо за мотивацию разобраться в более правильных решениях.

[strelok011]

лучше научиться сразу правильно делать, чем тратить время на попытки костылять и велосипедить :)