SiteConveyer by RemRyahirev

Описание

Репозиторий-шаблон для вёрстки с использованием Stylus, Handlebars и ES6. Призван помочь быстро начать верстать любой проект в удобной среде с автообновлением через browser-sync.

Установка

Общее

1. Нужно склонировать текущий репозиторий
2. Установить Git-клиент
3. Установить Node.js
4. Установить yarn командой npm i -g yarn или любым другим способом из руководства
5. Проверить установку командой yarn --version, иначе проверить системную переменную PATH
6. Установить WebStorm
7. В корневой папке выполнить yarn
8. В корневой папке выполнить yarn make

Команды

1. Для инициализации репозитория выполнить yarn make
2. Для запуска в корневой папке выполнить yarn dev
3. Для сборки выполнить yarn build
4. Для деплоя выполнить yarn deploy

Внимание! Деплой пока делается только через git или folder (в конкретную папку)!
Не забудьте изменить путь до репозитория/папки в /.dev/deploy.json

Принцип работы

Структура папок

1. src - исходные файлы
2. src/css - Stylus
3. src/css/vendor - стили сторонних библиотек
4. src/html - HTML-компоненты для страниц
5. src/html/data - data
6. src/html/helpers - Handlebars helpers
7. src/html/partials - Handlebars partials
8. src/html/decorators - Handlebars decorators
9. src/img - images
10. src/js - es6
11. src/js/vendor - скрипты сторонних библиотек
12. src/static - вся папка со всеми подпапками попадает в сборку без изменений
13. dist - сюда складываются dev-версия сайта для работы
14. dist/ - сюда складываются готовые шаблоны (с подставленными компонентами)
15. dist/css - собранные файлы стилей
16. dist/img - images
17. dist/js - js
18. build - сюда складываются production-сборка
19. .dev - здесь находятся системные файлы для работы SiteConveyer
20. .dev/deploy.json - это файл с настройкой куда производить deploy

Основной процесс

После запуска порождается процесс, который следит за содержимым папки /src. В случае обнаружения изменения в этой папке запускаются сборщики страниц, стилей, картинок и скриптов, происходит обновление папки /dist.

При пересборке страниц, картинок и скриптов происходит перезагрузка страницы в браузере, в то время как при пересборке стилей файл стилей заменяется на странице прямо на лету.

Disclaimer

За корявость написанного никакой ответственности нет. Продукт поставляется по принципу as-is.