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

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

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

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

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

Atom

• insales-liquid-snippets — сниппеты для написания кода на liquid.
• language-liquid — подсветка синтаксиса.

Sublime text

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

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

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

• Avocode
• Brackets

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

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

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

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

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

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

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

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

• Gulp
• Webpack
• Grunt

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

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

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

Содержание

1. Полезные ссылки