Инструменты разработки

Помимо умения пользоваться code inspector'ами браузеров, в число must have для разработчика шаблонов входят такие инструменты как:

  • Дополнения к редакторам кода.
  • Программы для удобной нарезки макетов.
  • Инструменты для локальной правки шаблонов InSales.
  • Автоматизация верстки.

Дополнения к редакторам кода

В частности, под sublime text и atom существуют пакеты для работы с liquid.

Atom

Sublime text

  • Siteleaf Liquid Syntax — сниппеты для написания кода на liquid, a так же подсветка синтаксиса.

Установка пакетов в sublime text производится через дополнение Package Control , в редакторе Atom установка происходит через интерфейс file -> settings -> install.

Программы для удобной нарезки макетов

Инструменты для локальной правки шаблонов InSales.

Для тех, кто привык верстать в своём привычном редакторе, разработан инструмент InSales_uploader. Инструмент позволяет синхронизировать изменения шаблона в локальной папке с изменениями в теме магазина. Также производит автоматические бекапы при скачивании темы и по желанию, запустив нужную команду.

Insales Uploader — это пакет для node.js, его настройка и установка описана по ссылке - InSales_uploader.

Важно!
Многие разработчики привыкли править шаблоны по FTP, и правка заключается обычно в скачивании и редактировании конкретных файлов, отследить и откатить изменения после этого довольно трудно.

При этом сделать бекап шаблона зачастую затруднителено, шаблоны могут храниться в базе данных или в шаблоне есть зависимости от подключенных плагинов, которые разбросаны по рабочим папкам CMS.

Шаблоны в InSales структурированы в одном месте и занимают от 1 до 2 мегабайт, их легко скачать и сделать альтернативную версию шаблона для разработки одним кликом, плюс в InSales есть история изменений темы, что позволяет легко отслеживать и откатывать изменения, а для удобной разработки есть InSales_uploader.

Автоматизация разработки.

Для автоматизации процессов верстки разработано множество подходов, но самыми популярными на данный момент являются сборщики front-end проектов написанные на node.js:

Сборщики и node.js позволяют:

  • эмулировать web-сервер;
  • оптимизировать изображения;
  • компилировать стили с применением препроцессоров (LESS, SASS, Stylus);
  • использовать любой шаблонизатор html (jade, liquid, handlesbars…);
  • автоматически скачивать плагины через bower;
  • автоматически обновлять страницу при изменениях в верстке (Browsersync);
  • сжимать css и js;
  • добавлять префиксы к css;
  • проверять js код на ошибки;
  • использовать базу данных;
  • вставлять содержимое файлов в другие файлы одной строчкой (примером является пакет rigger);

Более подробно о сборщиках читайте в интернете.
Для ознакомления можно сгенерировать сборку с помощью ресурса megaboilerplate.

Полезная статья?
Остались вопросы?
Отправь тикет в техподдержку!
Недавно просмотренные статьи