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

Но фреймворки нацелены на максимально возможное количество веб-сценариев. Таким образом, они включают множество предопределенных CSS, которые вы также не можете использовать на своем веб-сайте.

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

Рекомендуемое прочтение: ошибка Grunt «Команда не найдена» в терминале [Quickfix]

Начиная

Для реализации этой идеи нам нужен Grunt CLI. Поэтому убедитесь, что он установлен на вашем компьютере. Вы можете обратиться к этим двум предыдущим статьям, чтобы узнать больше об этом:

Я предполагаю, что у вас есть готовый каталог проекта, содержащий HTML и CSS.

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

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

npm установить grunt –save-deve
npm install grunt-uncss –save-deve

Базовая конфигурация
Создайте файл с именем Gruntfile.js в каталоге вашего проекта. Откройте файл в редакторе кода и вставьте в него следующие коды.

module.exports = function (grunt) {
grunt.initConfig ({
uncss: {
dist: {
файлы: {
‘CSS / style.css’: [‘index.html’]
}
}
});
grunt.loadNpmTasks ( ‘Грунт-uncss’);
grunt.registerTask (‘default’, ‘uncss’);
}

Код выше является базовой конфигурацией плагина; grunt-uncss будет извлекать ссылки таблицы стилей из .html, находить селекторы CSS, которые не используются в указанном .html, и отправлять вывод в css / style.css.
Опционная конфигурация
Grunt-Uncss поставляется с рядом опций. Скажем, вы хотите, чтобы он игнорировал определенные селекторы, вы можете включить параметр ignore и указать селекторы, например, так.

module.exports = function (grunt) {
grunt.initConfig ({
uncss: {
dist: {
файлы: {
‘CSS / style.css’: [‘index.html’]
}
},
опции: {
игнорировать: [‘#id-to-ignore’, ‘.auto-generated-class’, ‘.ignore-this-class’],
}
}
});
grunt.loadNpmTasks ( ‘Грунт-uncss’);
grunt.registerTask (‘default’, ‘uncss’);
}

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

module.exports = function (grunt) {
grunt.initConfig ({
uncss: {
dist: {
файлы: {
‘CSS / style.css’: [‘index.html’]
}
},
опции: {
игнорировать: [‘#id-to-ignore’, ‘.auto-generated-class’, ‘.ignore-this-class’],
таблицы стилей: [‘build/style.css’]
}
}
});
grunt.loadNpmTasks ( ‘Грунт-uncss’);
grunt.registerTask (‘default’, ‘uncss’);
}

Настройте выходной путь в соответствии с требованиями вашего проекта.

Запустите UnCSS

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

… И это содержание моей таблицы стилей.

.wrapper {
ширина: 960 пикселей;
поле: 60px авто;
}
.Заголовок страницы {
красный цвет;
}
.first-div, .second-div, .third-div, .fourth-div {
ширина: 100 пикселей;
высота: 100 пикселей;
}
.first-div {
цвет фона: # 000;
цвет: #fff;
}
.second-div {
цвет фона: # 555;
цвет: #ccc;
}
.third-div {
цвет фона: #ccc;
цвет: # f3f3f3;
}
.fourth-div {
цвет фона: #aaa;
цвет: # 777;
положение: абсолютное;
}

Единственный класс, которого нет в файле HTML, – это .fourth-div. Класс был удален из таблицы стилей. Запустите Terminal и введите grunt, чтобы запустить настроенную задачу в Gruntfile.js.

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

Когда вы загружаете неиспользуемые стили, этот совет может помочь вам значительно уменьшить размер файла таблицы стилей.