Полезные плагины Grunt для оптимизации верстки

Полезные плагины Grunt для оптимизации верстки

Опубликовано 3 года назад // Без комментариев

С первых дней открытия для себя Grunt я сразу понял, что уже ничего не будет как раньше. Постоянные дописывания CSS-префиксов для поддержки различными браузерами, сжатие CSS с помощью онлайн сервисов (да, и такое было в моей практики) и много другой повседневной рутины веб-верстальщика.. Словом все вызывало внутренний дисонанс, хотелось избавиться от этого — автоматизировать и начать уже творить.

Этот пост хотелось бы полностью посвятить подборке полезных плагинов для Grunt, которые необходимы в нашей работе. Сразу оговорюсь, что периодически я буду к нему возвращаться и дополнять. Если вы знаете чтот интересное, что не упомянуто в статье — пишите в комментарии.

autoprefixer

Раньше я частенько просматривал Caniuse, чтобы лишний раз не прописывать префиксы, где они уже давно не требуются. А когда работал со сложной CSS анимацией из-за своей врожденной лени писал их лишь для Web-kit браузеров, а потом после тестирование уже дописывал все остальные. Но теперь о префиксах можете вовсе забыть. По крайней мере после установки данного плагина, который их автоматически расставляет к CSS свойствам, основываясь при этом на статистику выше упомянутого Caniuse.

grunt-browser-sync

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

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

grunt-revizor

Очень классный компрессор, который не только минифицирует CSS, но и сокращает названиях всех классов в HTML, CSS и JavaScript файлах.