—»     —»   uncss: поиск неиспользуемого CSS-кода
  Раздел: CSS/Style Sheets   Комментариев: 2  

uncss: поиск неиспользуемого CSS-кода



Вам известно, что с перспективы разработки кода гораздо лучше, чем добавление дополнительных свойств на сайт или в приложение? Удаление ненужного барахла!
Будь то код, изображения или дополнительные библиотеки, удаление ненужных фрагментов кода – это как первый глоток вина после длительного рабочего дня. Можно испытать очень приятные ощущения, когда прогоняешь папку с картинками через ImageOptim, не правда ли? А что, если такой же инструмент существовал бы и для неиспользуемого CSS? И он существует. Называется этот инструмент uncss – утилита на базе NodeJS. Давайте взглянем на то, как работает uncss.

uncss: поиск неиспользуемого CSS-кода

Основное применение инструмента с командной строкой 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 – им очень просто пользоваться, а автоматизированный помощник сохранит ваш код максимально привлекательным и оптимизированным!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4543   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 июня 2014 @ 12:42
Написал: GM2mars — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
"За весь этот лишний код приходится расплачиваться вашим пользователям, которые подолгу ждут загрузки страниц, поэтому очень важно от него избавиться."

Ну да, слышал одну историю, что умер человек в ожидании, пока подгрузятся три лишних css правила, печальная история...
Комментарий #2: 19 июня 2014 @ 15:07
Написал: Денис Иванов — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Это все бред чистой воды. Правила могут быть под разные условия и они уйдут под нож.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2017    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031