Препроцессоры, такие как Sass, Less и Stylus, произвели революцию в разработке CSS. Если вы скептик до процессора, как я, попробуйте использовать Sass для проекта или два: вы никогда не вернетесь к сырому CSS снова. Несмотря на это внимание, разработчики редко рассматривают постпроцессоры. Pleeease может изменить это восприятие …
Что такое постпроцессор CSS?
Постпроцессор применяет изменения к файлу CSS после того, как он был вручную закодирован или сгенерирован препроцессором. Базовый пример — минификация: ваш CSS-файл анализируется для удаления пробелов, комментариев и ненужных измерений, например margin: 0px 0px 0px 0px; становится margin:0; , Результат сохраняется в новый файл меньшего размера, например styles.min.css.
Pleeease — это приложение Node.js, которое объединяет множество великолепных постпроцессоров в одном удобном инструменте командной строки, который работает на любой платформе.
Командная строка? Спасибо, не надо!
Не бойся; Pleeease не сложен в установке или запуске. Тем не менее, если вы не можете вынести мысль о наборе нескольких команд, попробуйте игровую площадку Pleeease онлайн ; Вы не получите всех преимуществ, но вы можете протестировать систему, используя метод «вырезать и вставить».
Установка Pleeease
Сначала установите Node.js из nodejs.org . Вы можете скачать установщики для Windows, Mac OS и Linux или использовать менеджер пакетов .
Затем откройте окно командной строки / терминала и введите следующую команду в Windows:
npm install -g pleeease
или в Mac / Linux:
sudo npm install -g pleeease
Обратите внимание на уникальное написание «pleeease», которое имеет четыре буквы «e» с тремя в середине.
Использование Pleeease
Теперь из командной строки вам нужно перейти с помощью команды cd Предполагая, что у вас есть папка с именем «myproject \ styles» на диске Windows C :, вы должны ввести:
c:
cd \myproject\styles
или, в Mac / Linux, если у вас есть папка «myproject / styles» в вашей домашней папке, вы должны ввести:
cd ~/myproject/styles
Обычно приглашение изменится, чтобы показать, в какой папке вы находитесь. Чтобы запустить Pleeease, введите:
pleeease compile
По умолчанию Pleeease объединит все CSS-файлы в один и создаст новый файл app.min.css в той же папке. Откройте этот файл в редакторе, чтобы увидеть, что было сделано.
Что делает Pleeease?
Pleeease запускает следующие процессоры на вашем источнике CSS.
Встроенный @import
Если вы не используете препроцессор, у вас могут быть объявления @import Pleeease встроит все файлы для создания единой таблицы стилей, которая уменьшает HTTP-запросы и пропускную способность.
Autoprefixer
Удивительный Autoprefixer позволяет навсегда забыть о префиксах вендоров. Вы указываете, какие браузеры должны поддерживаться, и autoprefixer добавляет соответствующие префиксы, используя информацию от caniuse.com . По умолчанию Pleeease добавляет префиксы для Firefox ESR, Opera 12.1, последних 2 версий каждого браузера и тех, чья доля рынка превышает 1% .
Лично я не стал бы беспокоиться о миксинах, генерирующих префикс процессора, или плагинах редактора авторефикса; Pleeease будет добавлять поддержку по мере необходимости при каждом запуске. Таким образом, число префиксов поставщиков будет со временем сокращаться.
Упакуйте медиа-запросы в единые правила
Мне это нравится. Вероятно, у вас одни и те же правила медиа-запросов, засоренные в вашем CSS. Препроцессоры рекомендуют разбивать CSS на модульные файлы, что усугубляет проблему. Pleeease использует MQPacker для применения всех объявлений в одном медиазапросе . Будьте осторожны, это может изменить порядок приложений CSS, поэтому тестирование жизненно важно.
рем запасной
Единицы размера шрифта rem. Новые относительные единицы измерения шрифта CSS3 ). К сожалению, устройство не работает в IE8 и ниже, поэтому Pleeease применяет отступ в пикселях на основе размера шрифта по умолчанию 16px.
Сократить код
Pleeease использует CSSWring, чтобы удалить все ненужные байты из вашего CSS. Вы будете рады услышать, что это не переносит путаницы минификации, найденные в некоторых других системах.
Разные изменения
Если этого недостаточно, Pleeease также может:
- применять фильтры CSS3, такие как
grayscaleblur - преобразовать псевдоэлементы с двумя двоеточиями, такие как :: after, :: before и :: first-line, в один двоеточие для совместимости с IE8
- добавить фильтры IE8 для прозрачности
- генерировать исходные карты
Наконец, есть некоторые экспериментальные функции, которые можно включить для преобразования собственных переменных CSS, применения цветовых функций CSS4 и разрешения уравнений calc()
Пользовательские конфигурации
Если вам повезет, Pleeease будет работать без дополнительной настройки, но вы можете изменить параметры, создав файл .pleeeaserc в папке стилей. Он содержит код JSON, который выглядит следующим образом:
{
"in": ["styles.css", "extra.css"],
"out": "styles.min.css",
"import": true,
"autoprefixer": {"browsers": ["last 2 versions"]},
"mqpacker": true,
"minifier": true,
"rem": ["14px", {"replace": false}],
"pseudoElements": true,
"opacity": false,
"filters": false,
"sourcemaps": false,
"next": false
}
В этом примере мы будем комбинировать styles.css и extra.css в указанном порядке, игнорируя все остальные CSS-файлы для создания файла с именем styles.min.css . @import Мы не слишком озабочены IE8, но мы заменим двойные двоеточия псевдоэлементов и обеспечим резервные единицы измерения rem
Документация Pleeease описывает все варианты.
Просмотр файлов
Если вы не хотите вводить pleeease compile
pleeease watch
Pleeease будет отслеживать все входные файлы и повторно генерировать выходной файл при изменении. Нажмите Ctrl / Cmd + C, чтобы остановить процесс.
Интеграция Grunt, Gulp и Brunch
Если вы выбрали Grunt , Gulp или Brunch в качестве инструментов для сборки, вы также можете использовать Pleeease в своем рабочем процессе. Следует признать, что вы можете настроить каждый компонент Pleeease отдельно, но это займет больше времени, и не каждый постпроцессор доступен для всех инструментов. Для получения дополнительной информации обратитесь к документации по рабочему процессу Pleeease .
Pleeease может не делать ничего, что вы не могли сделать раньше, но он упакован, поэтому его легко использовать и он работает с любым проектом, независимо от возраста или технологического стека. Рекомендуемые.