Будь то код, изображения или дополнительные библиотеки, удаление ненужных фрагментов кода – это как первый глоток вина после длительного рабочего дня. Можно испытать очень приятные ощущения, когда прогоняешь папку с картинками через ImageOptim, не правда ли? А что, если такой же инструмент существовал бы и для неиспользуемого CSS? И он существует. Называется этот инструмент uncss – утилита на базе NodeJS. Давайте взглянем на то, как работает uncss.
Основное применение инструмента с командной строкой uncss, будет заключаться в следующем:
uncss http://davidwalsh.name > styles.css
Результатом данной операции будет таблица стилей, включающая в себя только используемые CSS-правила, - все неиспользуемые правила будут удалены. Так как же работает uncss? Позвольте нам рассказать вам?
* HTML-файлы загружаются посредством PhantomJS и затем происходит выполнение javascript.
* Используемые таблицы стилей извлекаются из полученного HTML-файла.
* Таблицы стилей соединяются, а правила парсятся посредством css-parse.
* document.querySelector фильтрирует селекторы, которые не были найдены в HTML-файлах.
* Оставшиеся правила конвертируются обратно в CSS.
Как и с любой другой утилитой на NodeJS, вы сможете извлечь преимущество из javascript API. Давайте рассмотрим процесс использования на примере:
var uncss = require('uncss');
var files = ['my', 'array', 'of', 'HTML', 'files'],
options = {
ignore : ['#added_at_runtime', /test\-[0-9]+/],
media : ['(min-width: 700px) handheld and (orientation: landscape)'],
csspath : '../public/css/',
raw : 'h1 { color: green }',
stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
ignoreSheets : [/fonts.googleapis/],
urls : ['http://localhost:3000/mypage', '...'], // Deprecated
timeout : 1000,
htmlroot : 'public'
};
uncss(files, options, function (error, output) {
console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
console.log(output);
});
/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
console.log(output);
});
Вряд ли можно спорить с тем, что несколько лет работы веб-сайта, его поддержки и видоизменений могут привести к тому, что в коде будет слишком много лишнего. За весь этот лишний код приходится расплачиваться вашим пользователям, которые подолгу ждут загрузки страниц, поэтому очень важно от него избавиться. Обязательно попробуйте uncss – им очень просто пользоваться, а автоматизированный помощник сохранит ваш код максимально привлекательным и оптимизированным!