-
Возможность переноса компонентов между проектами
-
Подключение плагинов/шрифтов простым переносом файлов в папку
-
Удобная работа с scss переменными
-
Автопрефиксер
-
Сжатие картинок
-
Встроенный insales-uploader
npm i
Настройка сборщика находится тут /gulpfile.js/config
Для работы InSales uploader нужно изменить файл /gulpfile.js/config/uploader.json, заполнить параметры для доступа к магазину и выставить свойство use в true.
gulp theme:deploy и gulp theme:watch нужно запускать в отдельных терминалах или поочередно,
чтобы отправка изменений на сервер не началась до того как соберется шаблон в папку theme.
| Имя задачи | Назначение |
|---|---|
| default | Собирает тему и запускает отслеживание изменений |
| theme:deploy | Собирает тему |
| theme:watch | Отслеживание изменений в компонентах, лэйаутах и запускает InSales uploader |
| uploader:push | Загрузить локальную тему в тему магазина, при этом тема в магазине будет полностью перезаписана |
| Имя директории | Назначение |
|---|---|
| components | Компоненеты которые будут включаться в шаблон |
| config | Конфиги для темы |
| gulpfile.js | Задачи для gulp.js |
| layouts | Лэйауты для шаблона |
| media | Медиа файлы для шаблона |
| plugins | Js/css плагины |
| theme | Директория темы |
| bundles | Бандлы (css/js) |
| fonts | Шрифты |
| scss_import | Переменные для scss |
Каждый компонент лежит в отдельной папке внутри директории components.
стили
Стили хранятся в папке scss, сборщик понимает .css и .scss файлы.
При использовании scss, можно использовать переменные из variables_default.scss, variables.scss
скрипты
JS файлы лежат в корневой папке компонента
сниппеты
Liquid файлы лежат в корневой папке компонента