Как объединить дубликаты медиа-запросов

Сегодня существует множество платформ, которые могут помочь вам быстро создавать адаптивные веб-сайты. Например, Bootstrap и Foundation поставляются с набором общих компонентов веб-сайтов, плагинов, множеством предопределенных правил стилей, а также медиазапросами CSS3 для построения адаптивной сетки.

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

Разве не было бы лучше, если бы мы могли удалить эти дубликаты и объединить их в одно правило CSS? Если вы согласны, проверьте этот совет.

Рекомендуемое чтение: как удалить ненужные модули в jQuery

Начиная

Эта задача зависит от хрюкать а также Grunt CLI, пакет Node.js для автоматизации задач. В терминале или командной строке введите следующую команду для установки Grunt CLI (командная строка).

npm install -g grunt-cli

После выполнения вышеуказанных команд убедитесь, что команда grunt работает. Вы можете проверить это, набрав grunt —version, который должен показать номер установленной версии Grunt, вот так.

Однако, если вы столкнулись с ошибкой, когда команда не найдена или не распознана, перейдите к нашему предыдущему сообщению о том, как ее исправить: Решение Grunt «Команда не найдена» Ошибка в терминале [Quickfix]

Установить плагин Grunt
Перейдите в папку проекта и выполните следующую команду, чтобы создать файл с именем Gruntfile.js, который будет использоваться для указания функций Grunt и регистрации задач.

коснитесь Gruntfile.js

Введите эти две команды ниже, чтобы загрузить модуль Grunt, который требуется для запуска задачи позже. Также загрузите плагин Grunt под названием grunt-Объединить-медиа-запросы (cmq) для объединения соответствующих медиа-запросов.

npm установить grunt —save-dev
npm установить grunt-объединить-медиа-запросы —save-dev

После завершения процесса вы должны найти дополнительную папку с именем node_modules в каталоге вашего проекта, содержащую эти модули.

Регистрация и настройка задачи

Давайте откроем Gruntfile.js и поместим в него следующий код.

module.exports = function (grunt) {
grunt.initConfig ({
cmq: {
опции: {
log: false
},
your_target: {
файлы: {
‘вывод’: [‘build/*.css’]
}
}
}
});
grunt.loadNpmTasks ( ‘Грунт-сочетающий-медиа-запросы’);
grunt.registerTask (‘default’, ‘cmq’);
};

Этот код выше настраивает задачу cmq. Он содержит два параметра, журнал и файлы:

Параметр журнала является логический что вы можете установить либо true, либо false; если установлено значение true, будет создан файл журнала, состоящий из обработанных медиа-запросов.

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

Запустить задачу

На данный момент все настроено; мы установили Grunt CLI, модуль Grunt, а также плагин для объединения медиа-запросов. Теперь нам просто нужно выполнить задачу.

Например, у меня есть CSS-файл, содержащий несколько дублированных медиа-запросов, как вы можете видеть ниже.

Откройте Терминал, убедитесь, что вы все еще находитесь в каталоге вашего проекта. Тогда просто напиши хрюкать, вот так.

Мы сделали. Ниже приведено сравнение между исходным файлом и выходным файлом.

Дальнейшая ссылка