Gulp-сборка для фронта

Основная цель разработки через сборку - упростить процесс вёрстки для верстальщика и ускорить процесс интеграции дизайна для bitrix-разработчика.
В репозитории лежат тестовые данные для облегчения понимания работы с вёрсткой

Быстрый старт

Установка

Начальные шаги установки схожи для систем Linux и Windows

1. Откройте консоль системы
2. Введите команду node -v в командной строке системы.
   Ожидаемый ответ должен состоять из версии пакетного менеджера.
3. Если вывелась версия, то переходите к пункту 4.
   Если версия node не вывелась необходимо произвести установку платформы.
   Дальнейшие шаги будут различаться для Linux и Windows.
   а) Для Windows:
   перейдите на сайт https://nodejs.org/ru/ и скачайте последнюю версию;
   запустите установщик, в ходе установки можно всё время нажимать кнопку "Далее";
   после окончания установки снова переходите к п.2;
   б) Для Linux:
   зайдите в консоль Linux правами sudo;
   проверьте установлена ли библиотека cURL командой ldconfig -p | grep curl;
   если вы не увидели ответ, сначала установите библиотеку;
   пробуйте скачать дистрибутив ноды одной из команд: curl -fsSL https://deb.nodesource.com/setup_17.x | bash - или curl -fsSL https://rpm.nodesource.com/setup_17.x | bash -;
   после окончания скачивания установите пакет одной из двух команд: apt-get install -y nodejs или yum install -y nodejs;
   после окончания установки снова переходите к п.2;
4. Скачайте проект, зайдите в папку и произведите установку проекта командой npm i

Запуск сборки

Вы можете запустить сборку для двух целей:

1. Для вёрстки - командой npm run dev Сборка будет произведена в папку dev.
2. Для разработчика, которому требуется разбиение на компоненты - командой npm run prod. Сборка будет произведена в папку prod.

Из чего состоит сборка

1. Сборка позволяет создавать спрайты из картинок svg.
   В начале работы скрипта создаётся карта папки src/svg. Чтобы создать спрайт, создайте папку внутри папки src/svg. Название папки будет соответствовать названию спрайта. ID, по которому можно будет получить конкретное изображение из спрайта, это название файла внутри этой папки.
   Созданные спрайты кладутся в папку src/img.
2. Шаблонизация html.
3. Сборка css для конкретной страницы с помощью препроцессора sass из файлов, которые лежат в папке src/sass.
4. Создание файлов шрифтов из файлов, которые лежат в папке src/font.

Как организовать структуру файлов

1. Файлы страниц должны лежать в папке src
2. Файлы стилей страниц должны лежать в папке src/scss
3. Файлы js-скриптов страниц должны лежать в папке src/js
4. Все шрифты должны лежать в папке src/font
5. Если применяются сторонние библиотеки их файлы следует складывать в папки src/lib/css и src/lib/js
6. Компоненты используемы на странице должны лежать каждый в отдельной папке вместе с scss файлами, которые относятся к данному html-коду. JS-код компонента следует класть в тег script внутри html-кода компонента. Файл с html-кодом компонента следует называть index.html, файл стилей - style.scss.
7. Компоненты следует html-код компонента нужно подключать прямо в файл страницы с помощью конструкции @@include("./path/to/component"). Scss-файл компонента следует подключать в файл стилей созданный специально для данной страницы. Наследование scss делаем с помощью конструкции @import "./components/news/index.scss".
8. Если какие-то стили относятся к странице в целом их стоит положить в папку components и подключать в файл стилей страницы. Это позволит понять какие стили являются общими.
9. Основная идея в том, чтобы все стили были внутри папки components, а для подключения на странице во время вёрстки их стоит импортировать в файлы в папке src/scss
10. Компоненты не должны наследовать друг друга! Если иначе сделать никак, надо сделать более крупный компонент. Связано это с тем, что при сбоке в прод компоненты унаследуют стили и в дальнейшем их будет проблемно разделить, что увеличит затраты времени на разработку.

Где искать файлы разработчику, который будет применять вёрстку

Файлы сборки: картинки, css/js/html-файлы будут лежать в папке prod. Файлы относящиеся к компонентам в папке components. Страницы будут лежать в корне папки, какие на ней подключаются компоненты понятно из конструкции @@include("./path/to/component")