Процесс вёрстки — важный этап при создании сайта. В нашей Студии ему уделяется не меньше внимания, чем программированию или дизайну. В этой статье хотелось бы рассказать об инструментах, которым мы отдаем предпочтение, и поделиться опытом автоматизации некоторых этапов вёрстки.

Пара слов об организации процесса

Мы стремимся выстроить производство таким образом, чтобы на выходе получить интернет-проект, трудозатраты на который были бы оптимальны, при этом он соответствовал стандартам качества и решал все поставленные задачи. Для этого соблюдается несколько важных правил. У нас чётко разделены зоны ответственности между верстальщиками и программистами. Это ускоряет поиск ошибок, если они вдруг возникают, и минимизирует время их исправления. В процессе производства отдельно располагаются html-версии и рабочие копии проекта. Такой подход позволяет избежать путаницы в головах разработчиков и разграничить ответственность. Вёрстка всегда должна поддерживаться в актуальном состоянии. Всё, что видно на сайте (фронтенд), обязательно воспроизводится в html-шаблонах: все состояния элементов, все сообщения об ошибках и т.д. Это даёт возможность ввести еще один уровень тестирования. Проводится проверка на соответствие html-шаблона дизайн-макету, что позволяет выявить на ранней стадии возможные проблемы с интерфейсом пользователя (UI) без привлечения к работе программистов, которые отвечают только за бэкенд.

Инструментарий

Отдельно стоит сказать и о наших «рабочих лошадках». Основным редактором выступает Webstorm IDE. В процессе вёрстки достаточно часто используется функция TODO, которая обеспечивает взаимодействие и общение между людьми, работающими над одним проектом. Подход не новый, но очень удобный. Все дефекты и узкие места отмечаются маркером TODO. Кроме этого, с помощью него можно оставить комментарий, который будет доступен другим коллегам по цеху. Это позволяет избежать ошибок или поделить работу. В последних версиях Webstorm IDE появилась вкладка terminal — это консоль, из которой удобно работать с различными npm (node packaged modules). С её помощью без лишних движений можно загружать новые файлы в проект.

При вёрстке у нас в Студии чаще всего используется связка: GIT + Grunt (Gulp) + Bower. К такому решению мы пришли, исходя из собственного опыта. Данные продукты оптимальны и удобным при работе. Каждая программа — это инструмент, подходящий для решения конкретной задачи. Grunt — это система сборки проектов, которая применяется для соединения файлов и их минификации (простой подход уменьшения размеров css/js/html-файлов), а также оптимизации изображений и многого другого. Bower — пакетный менеджер, который позволяет быстро устанавливать необходимые библиотеки, плагины и поддерживать их в актуальном состоянии. Он работает как со сторонними файлами, так и с локальными «пакетами». Программа обеспечивает работу с хранилищем плагинов и даёт возможность их быстрого обновления в проектах. В своей работе мы всегда применяем систему контроля версий. Свой выбор мы когда-то остановили на GIT, это современное решение неплохо поддерживается. GIT обладает полезными функциями, которых нет в SVN или Mercurial, например, возможностью делать локальные коммиты и отдельные ветки, а также индексацией изменений до сохранения.

Еще один удобный инструмент — Less. Это препроцессор, позволяющий сократить написание css-кода, увеличив при этом его модульность, расширяемость, повторное использование и качество в целом. Чтобы избежать путаницы внутри Студии, для удобства введен единый регламент по расположению и наименованию less-файлов, миксинов (т.е. директив, которые позволяют определять множественные правила на основе аргументов).

А что еще?

В процессе вёрстки не стоит забывать о шаблонизации, порой это может значительно сэкономить время. Если в проекте присутствуют повторяющиеся элементы, то применение шаблонов позволит сократить работу над вёрсткой и получить результат быстрее. Для шаблонизации мы обычно применяем Smarty. Другим полезным помощником может стать Google Chrome. Это не только браузер, но и отличный инструмент разработки. Наиболее часто используемые там функции: profiling, emulation, timeline, console, rendering, отладка скриптов — breakpoints. Схожие возможности есть и у других браузеров, но Google Chrome показался нам наиболее удобным. Чтобы облегчить работу команде Студии, мы сделали Sitemap. Однажды нам надоело блуждать в недрах проекта и путаться, поэтому и была создана интерактивная карта шаблонов сайта. Она необходима для быстрых переходов между шаблонами, их поиска во время демонстрации или тестирования вёрстки. Крепится карта специальным javascript к шаблонам, не влияет на вёрстку и не мешает программистам. Вызывается с помощью заданной клавиши. Просто и удобно.

Тему тестирования мы уже затрагивали в недавнем материале о кроссбраузерности, этот этап у нас строится по формуле: виртуальная машина + BrowserStack + те устройства, которые есть под рукой. Конечно, выбор рабочих инструментов — это всегда субъективные предпочтения. Каждый день на рынке программного обеспечения появляются всё новые и новые продукты. Мы стремимся быть в тренде и постоянно тестируем новинки. Возможно, наш инструментарий в ближайшее время пополнится чем-то ещё.