Как объединить дубликаты медиа-запросов
Сегодня существует множество платформ, которые могут помочь вам быстро создавать адаптивные веб-сайты. Например, Bootstrap и Foundation поставляются с набором общих компонентов веб-сайтов, плагинов, множеством предопределенных правил стилей, а также медиазапросами CSS3 для построения адаптивной сетки.
Однако одним из недостатков использования этих структур является то, что медиа-запросы разбросаны по мере того, как они объявляются и вкладываются в миксины или функции. Таким образом, вы можете получить множество дублированных медиазапросов по всем кодам.
Разве не было бы лучше, если бы мы могли удалить эти дубликаты и объединить их в одно правило CSS? Если вы согласны, проверьте этот совет.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Рекомендуемое чтение: как удалить ненужные модули в 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-файл, содержащий несколько дублированных медиа-запросов, как вы можете видеть ниже.
Откройте Терминал, убедитесь, что вы все еще находитесь в каталоге вашего проекта. Тогда просто напиши хрюкать, вот так.
Мы сделали. Ниже приведено сравнение между исходным файлом и выходным файлом.
Дальнейшая ссылка
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)