—»     —»   Grunt: Исключаем лишний CSS-код
  Раздел: CSS/Style Sheets   Нет комментариев  

Grunt: Исключаем лишний CSS-код



Применение фреймворков вроде Bootstrap или Foundation – это один из наиболее быстрых способов создать адаптивный веб-сайт. Эти фреймворки предоставляют все необходимое, включая компоненты сетки и пользовательского интерфейса для создания отличительных и функциональных сайтов.

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

Grunt: Исключаем лишний CSS-код

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

Приступаем к работе

Чтобы сделать то, что задумали, нам потребуется Grunt CLI. Так что, не забудьте установить этот инструмент на компьютер. Чтобы поближе познакомиться с ним, можете прочесть следующие статьи:

* How To Remove Unnecessary Modules In jQuery (Исключаем необязательные модули из jQuery)
* Solving Grunt “Command Not Found” Error In Terminal (Устраняем ошибку “Command Not Found” в терминале Grunt)

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

Как можно видеть на представленном скриншоте, у нас здесь две папки под названием build (здесь мы будем сохранять таблицы стилей в ходе разработки) и css (эта папка нужна для сохранения финального результата).

Grunt: Исключаем лишний CSS-код

Теперь пройдите в папку проекта посредством Терминала и впишите следующую команду. Эти две команды, устанавливают Grunt и grunt-uncss, - это и есть плагин Grunt, который потребуется нам для запуска задачи по удалению ненужного CSS-кода.

npm install grunt --save-deve
npm install grunt-uncss --save-deve

Базовые настройки

Создайте файл Gruntfile.js в папке с вашим проектом. Откройте его в редакторе кода, и внесите туда следующий код:

module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}

Вышеприведенный код – это базовая настройка плагина. grunt-uncss воспользуется ссылками на таблицы стилей, указанными в .html, определит css-селекторы, которые не используются в указанном html-документе, и выведет вам финальный результат в документ css/style.css.

Опциональные настройки

grunt-uncss представлен с несколькими опциями. Предположим, что вам нужно, чтобы плагин игнорировал определенные селекторы. Тогда вы можете воспользоваться параметром ignore и указать селекторы следующим образом:

module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
},
options: {
ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}

Вы также можете настроить grunt-css на работу только с определенными таблицами стилей, примененными в HTML-документе.

module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
},
options: {
ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
stylesheets: ['build/style.css']
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}

Настройте путь до файла результата в соответствии с требованиями к вашему проекту.

Запуск UnCSS

Ниже представлено содержимое нашего HTML-файла.

<html>
<head>
<title>CSS Unloaded</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<h1 class="page-title">Unload CSS</h1>
<div class="first-div"><p>1st</p></div>
<div class="second-div"><p>2nd</p></div>
<div class="third-div"><p>3rd</p></div>
</div>
</body>
</html>

А это содержимое наших каскадных таблиц стилей:

.wrapper {
width: 960px;
margin: 60px auto;
}
.page-title {
color: red;
}
.first-div, .second-div, .third-div, .fourth-div {
width: 100px;
height: 100px;
}
.first-div {
background-color: #000;
color: #fff;
}
.second-div {
background-color: #555;
color: #ccc;
}
.third-div {
background-color: #ccc;
color: #f3f3f3;
}
.fourth-div {
background-color: #aaa;
color: #777;
position: absolute;
}

Единственный класс, который отсутствует в HTML-документе, - это .fourth-div. Он был исключен из таблиц стилей. Запустите Терминал, и напишите grunt, чтобы выполнить поставленную задачу в Gruntfile.js.

Grunt: Исключаем лишний CSS-код

Откройте оба CSS-файла. Вы увидите, что селектор класса .fourth-div уже исключен и не используется в HTML.

Grunt: Исключаем лишний CSS-код

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

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5443   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031