Как повысить качество и скорость разработки HTML верстки

Привет, меня зовут Константин Величко. Я фронтенд разработчик. На протяжении нескольких лет я работаю над созданием инструмента, помогающего фронтенд-разработчикам более качественно, быстро и удобно делать свою работу.

«Рутина» — так можно назвать основную часть деятельности современного фронтендщика. Мы собираем спрайты и SVG-иконки, оптимизируем графику, конкатенируем и минифицируем стили и скрипты и т.п.
Работа, скажем так, совсем не радующая креативную душу разработчика.
Просиживая долгие часы, пытаясь качественно сделать свою работу, я старался найти способ ускорить исполнение. При этом чтобы качество не пострадало.

Долго ведь не значит хорошо. Мне хотелось писать код максимально эффективно. И помочь себе и своим коллегам максимально оптимизировать верстку.
Несколько лет размышлений и поисков даром не прошли. Представляю Вам инструмент gulp-front. который имеет высокую степень настраиваемости. С его помощью решается большинство задач, стоящих перед фронтендщиком.

Основная функция gulp-front — работа с версткой. Однако его можно использовать также и для разработки на JavaScript.

Константин Величко - Как повысить качество и скорость разработки верстки

История вопроса

Инструментов, подобных gulp-front, сейчас появляется все больше и больше. Но пару лет назад ничего подобного не было. И мне пришлось пройти весь путь поиска, проб и ошибок практически в одиночку.

Сначала хотелось просто иметь возможность вставлять блоки кода и редактировать их в одном месте, эдакий include в HTML. Я начал проводить исследования на предмет готовых решений или технологий, которые позволили бы мне добиться желаемого результата. Однако всё это было не то: сложности в использовании и неполный охват необходимых функций.

Потом я попробовал использовать шаблонизатор. Но и здесь возникли неудобства, ведь мне нужно было отдавать бэкэнщикам привычный им HTML и CSS.
Поэтому шаблонизаторы, работающие на клиенте, сразу отметались, к тому же они были довольно прожорливые и медленные.

В это время на популярных сайтах для разработчиков начали всплывать статьи про node.js. Я заинтересовался этой мощной и расширяемой платформой. И, как оказалось позже, платформа оправдала мои надежды.

В качестве шаблонизатора я выбрал Jade (сейчас его переименовывают в pug.js из-за юридических терок). Jade был удобен мне потому, что мог дать тот самый вожделенный include. А шансов допустить ошибку было меньше. Всё дело в том, что не нужно было писать закрывающие теги, а вся структура легко видна. Также в jade есть куча крутых штук, таких как: циклы, интерполяция, операторы ветвления, переменные и миксины.

Для CSS был выбран Stylus из-за его более легкой настройки и отсутствия возни с ruby на widows машинах. Плюсом стал и его минималистичный, но мощный синтаксис.

В ранних верисях я использовал grunt.js для запуска задач. Впрочем, выбора особого у меня не было, в то время. В то время, кажется, больше ничего не использовалось.. Правда, позже я сменил его на gulp.js. Работал он медленно, еще и сложности с промежуточным хранением файлов постоянно возникали. Ну и по некоторым другим причинам тоже.

Примерно в то же самое время я начал использовать БЭМ.

Что есть сейчас

  1. На данном этапе самая вкусная для меня штука — это модули.
    Что такое модуль? Это папка, в которой лежат все технологии реализации блока (HTML, CSS, JavaScript). Вы можете переносить этот модуль между проектами, просто скопировав саму папку. Чем больше вы сделаете проектов, тем больше готовых модулей будет у вас, нужно только скопировать и адаптировать под текущий проект.
  2. Реализована сквозная типографика на базе normalize.css. Настраивается она с минимумом вложений — правкой нескольких переменных. Заголовки, параграфы, списки, цитаты и таблицы в итоге выглядят круто.
  3. Набор базовых модулей. Базовых по тому что они встречаются 95% проектов. Если необходимости в них не возникает, удалить их легко. Список модулей можно посмотреть здесь.
  4. Сборка SVG спрайтов для иконок.
  5. Сборка PNG спрайтов, в том числе и для устройств с высокой плотностью пикселей (Retina)
  6. Оптимизация всей графики.
  7. Есть легкий способ писать @media запросы, не выходя за пределы модуля. Здесь на помошь придет набор миксинов rupture. При этом все @media правила будут передвинуты в конец файла и сгруппированы.
  8. В качестве live-reload сервера используется очень крутая штука — browser-sync. Browsersync позволяет автоматически обновлять страницу на всех открытых браузерах. Умеет синхронизировать действия между всеми браузерами (прокрутка, ввод текста, клики), что позволяет куда легче тестировать и отлаживать верстку на различных устройствах.
  9. Естественно, есть автоматическая расстановка вендорных префиксов, конкатенация и минификация CSS и JavaScript.

Мои планы на будущее

  • Переписать миксины форм, сейчас они, на мой взгляд, слишком монолитны;
  • Сделать модульный gulpfile, это уменьшит время первого старта и позволит легче редактировать задачи;
  • Переписать gulpfile под 4 версию gulp.js;
  • Сделать инкрементальный билд шаблонов;
  • Написать документацию и FAQ;
  • Написать скрипт для добавления модулей и страниц из шаблона;
    Поправить мелкие баги и недочеты.

И вернемся, собственно, к тому, с чего начали — к Gulp-front.
Gulp-front — это open source, распространяется по лицензии MIT. Жду от всех заинтересованных форков, pull request’ов, вопросов. Кроме того, у проекта есть чат в Gitter.

Всем спокойного кода, удачи и всех благ!

Оставьте свой комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *