CSS-препроцессоры в своё время значительно облегчали работу по написанию CSS кода. Однако в некотором роде все они были несовершенны и имели значительные изъяны в работе. А потому на смену препроцессорам пришёл постпрепроцессор PostCSS.
Это довольно таки мощный инструмент, облегчающий работу с CSS. Постпрепроцессор уже сегодня используется в таких крупных компаниях как Twitter и Google. Кроме того, по сообщениям разработчиков Bootstap, пятая версия CSS-фреймворка вероятнее всего также будет написана на PostCSS.
Многие здесь наверно уже знакомы с простпрепроцессингом. Кто-то уже активно использует PostCSS во всех своих проектах, кто-то планирует начать его использовать.
Для ускорения работы в области фронтэнд веб-разработки я написал собственный Yeoman генератор, который называется generator-alchemist. О нём и о моём процессе разработки интернет-сайтов пойдёт речь в данной статье.
Состав
Jade
Использование шаблонизатора Jade опционально. Yeoman генератор при установке позволяет нам выбрать, хотим ли мы использовать Jade в нашем новом проекте или нет.
После установки пишите свой Jade код в папке /src/jade/ и он будет автоматически компилироваться в HTML.
HTML
После компиляции Jade, HTML файл попадает в папку /src/html/, где проходит W3C валидацию кода и отправляется в папку /dist/. В том случае, если вы не используете Jade, вы пишите HTML код в папке /src/html/.
CSS
Изначальный CSS файл включает в себя несколько базовых вещей:
Grid System
<div class="container"> <div class="row"> <div class="col-8"> Content block </div> <div class="col-4"> Right sidebar </div> </div> </div> PostCSS
А вот тут начинается самое интересное. Сборка проекта включает себя большое количество PostCSS плагинов, которые позволяют писать CSS быстро и качественно. Ниже список плагинов, которые я использую:
Плагин парсит ваш CSS код и добавляет к нему все необходимые вендорные префиксы.
Было:
:fullscreen a { display: flex } Стало:
:-webkit-full-screen a { display: -webkit-box; display: -webkit-flex; display: flex } :-moz-full-screen a { display: flex } :-ms-fullscreen a { display: -ms-flexbox; display: flex } :fullscreen a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } Добавляет CSS свойства, позволяющие с лёгкостью центрировать любой элемент.
Было:
.foo { top: center; left: center; } Стало:
.foo { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } Добавляет Clearfix аттрибуты для очистки плавающих элементов.
Было:
.foo { clear: fix; } .bar { clear: fix-legacy; } Стало:
.foo:after{ content: ''; display: table; clear: both; } .bar { clear: fix-legacy; } .bar:before, .bar:after { content: ''; display: table; } .bar:after { clear: both; } .bar { zoom: 1; } Позволяет сокращать названия цветов.
Было:
.hello { border-bottom: 1px solid rgb(200); background: #20; color: #f; box-shadow: 0 1px 5px rgba(0, 0.5); } Стало:
.hello { border-bottom: 1px solid rgb(200, 200, 200); background: #202020; color: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } Крайне мощный инструмент для минификации CSS кода, идущего на продакшен.
Удаляет все комментарии из CSS кода. Раньше с этой задачей отлично справлялся плагин CSS Nano, однако после обновления PostCSS до версии 5.0.x эта возможность перестала работать. Надеюсь, эту проблемы в ближайшее время исправят разработчики.
Добавляет псеводэлемент :focus ко всем селекторам, где используется :hover.
Было:
.button:hover { background: red; } Стало:
.button:hover, .button:focus { background: red; } Плагин, упрощающий написание min-width и max-width CSS свойств.
Было:
@media screen and (width >= 500px) and (width <= 1200px) { .bar { display: block; } } Стало:
@media screen and (min-width: 500px) and (max-width: 1200px) { .bar { display: block; } } Позволяет использовать синтаксис Sass в работе с CSS: вложенность, переменные и многое другое. Подробнее обо всех возможностях PreCSS можно ознакомиться на странице плагина.
Было:
$blue: #056ef0; $column: 200px; header { background: $blue; width: $column; h1 { font-size: 18px; } } Стало:
header { background: #056ef0; width: 200px; } header h1 { font-size: 18px; } Плагин, генерирующий rem и em из px.
Было:
p { font-size: 16px; } Стало:
p { font-size: 1rem; } Ещё один мощный PostCSS плагин, позволяющий сокращать написание CSS кода.
Было:
.section { margin: 40px; text: bold center uppercase dimgrey 1.25em 1.5 .05em; } .section.inset { margin: * auto; } Стало:
.section { margin: 40px; color: dimgrey; font-weight: bold; text-align: center; text-transform: uppercase; font-size: 1.25em; line-height: 1.5; letter-spacing: .05em; } .section.inset { margin-right: auto; margin-left: auto; } Добавляет CSS свойство size для обозначения ширины и высоты элемента.
Было:
.two { size: 20px 10px; } .one { size: 10px; } Стало:
.two { width: 20px; height: 10px; } .one { width: 10px; height: 10px; } JavaScript
Минифицирует JavaScript код, располагающийся в папке /src/js/ и отправляет минифицированный файл в папку /dist/js/.
Изображения
Минифицирует изображения, которые находятся в папке /src/images/ и отправляет их в папку /dist/images/.
Установка
Перед установкой генератора вам нужно иметь на своём компьютере установленные:
Если у вас уже всё вышеперечисленное установлено, запустите в терминале следующую команду для глобальной установки генератора:
$ sudo npm install -g generator-alchemist После чего инициализируйте генератор в папку будущего проекта:
$ yo alchemist Вот и всё. Все необходимые файлы для старта работы над проектом установлены. Осталось только запустить Gulp:
$ gulp Пишите ваш Jade / HTML код в папке /src/jade/ или /src/html/
Пишите ваш CSS код в папке /src/css/
Пишите ваш JavaScript код в папке /src/js/
Помещайте ваши изображения в папку /src/images/
И все файлы будут автоматически оптимизироваться публиковаться в папку /dist/, идущую на продакшен.
Спасибо за ваше внимание!
github.com/azat-io/generator-alchemist
ссылка на оригинал статьи http://habrahabr.ru/post/265449/
Добавить комментарий