PavelUstyugov
@PavelUstyugov
proger support

Как вырезать все неиспользуемые стили из css файла подключив несколько html страниц из общего числа?

Бывает же такое, что скачал бесплатный html шаблон для сайта. В шаблоне по идее предусмотрено много страниц. На все случаи жизни. А сайт предполагает только пару-тройку страничек, которые мы будем использовать.

Как удалить из css файла все неиспользуемые стили?

Про JS файл даже не осмеливаюсь спрашивать. Как выпилить оттуда все неиспользуемые скрипты - с этой задачей и вручную можно справиться.
  • Вопрос задан
  • 490 просмотров
Пригласить эксперта
Ответы на вопрос 3
kurtov
@kurtov
В Chrome есть раздел Audits, после запуска он покажет отчет в котором есть список неиспользуемых CSS правил.
Ответ написан
@dimentimor
Частично можно очистить css при помощи двух регулярных выражений.

Первое находит название класса и всё выражение целиком.
081468de2aa94486911ec0fcc782d5e0.jpg

Проверив css файл мы получим массив совпадений, который нужно обойти в цикле, подставляя название класса в другое регулярное выражение.
6f848be1abd6444494a94627925ab85c.jpg

Проверив html файл на соответствие полученному шаблону мы узнаем, используется ли на странице данный класс.
И если не используется, то заменяем все выражение .class {...} на пустую строку.

var css = '	\
	.foo {\
	  color: red;\
	  width: 60;\
	}\
\
	.bar {\
	  color: green;\
	  width: 80;\
	}\
';

var html = '\
	<div class="foo"></div>\
	<div class="lorem"></div>\
	<div class="ipsum"></div>\
';


// шаблон класса
var regExp = /(\.([\w\-_]*)\s?\{.*?\})/gmi;

// для каждого совпадения
var newCss = css.replace(regExp, function () {
	var arr = Array.prototype.slice.call(arguments, 1, arguments.length-2);

	// подставляем совпадение в другое рег. выражение
	var regCls = new RegExp('class=\"(.*?' + arr[1] + '.*?)\"', 'gi');

	// поиск класса в html
	var res = html.search(regCls);

	// удаляем или оставляем класс в css
	return res == -1 ? '' : arr[0];
});

console.log(newCss);


п.с. Для реального использования регулярные выражения и код требуют усовершенствования. Css ведь не так прост)
Ответ написан
alvvi
@alvvi
export default apathy;
Варианты сверху конечно классные, но думаю автор искал что-то типа gulp-uncss
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы