Применение фреймворков вроде Bootstrap или Foundation – это один из наиболее быстрых способов создать адаптивный веб-сайт. Эти фреймворки предоставляют все необходимое, включая компоненты сетки и пользовательского интерфейса для создания отличительных и функциональных сайтов.Однако фреймворки направлены на то, чтобы охватить максимальное количество возможных сценариев. Следовательно, они включают в себя множество заранее подготовленного 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 и 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-файла.



                CSS Unloaded

`Unload CSS`

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

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

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

Вернуться назад

Метки: Datalife Engine

Техно-мир

DataLife Engine > Версия для печати > Исключаем лишний CSS-код

`Unload CSS`