Должно быть установлено

node.js - https://nodejs.org/ Версию лучше последнюю скачать

npm

$ npm i npm -g —allow-root

gulp

$ npm i gulp -g —allow-root

Версия пакета может не подходить для проекта. http://joxi.ru/Vrw8deKIK64dem Необходимо установить gulp 4 https://www.liquidlight.co.uk/blog/article/how-do-i-update-to-gulp-4/

Проверить версию

$ gulp -v

Видим что версию CLI надо обновить

CLI version 3.9.1
Local version 4.0.0-alpha.2

Решается

$ npm install --global gulp-cli

$ gulp -v

И видим

CLI version 1.2.2
Local version 4.0.0-alpha.2

Настройка окружения

Для установки необходимых скриптов необходимо перейти

$ cd src/js && npm i && cd ../..

и запустить команду

$ npm i

Как и где работаем

---

Вся работа ведется в src/

Сборка

По дефолту сборка происходит в build/, вебсервер так же смотрит в эту папку.

---

Собираем проект

для production

$ gulp build

для работы

$ gulp dev

Основные команды

подключение миксинов инклюдами

$ gulp addInc2pug

Создание папки с стилями в bem-blocks

$ gulp create-style --name b-block-name

Проверка js

$ gulp eslint

Создание переменной с цветов в variables

$ gulp color-create --color --ffffff

Создаем шрифт из иконок

---

в папку добавляем svg файлы. /src/images/svg_for_icon/

их нужно сохранить определенным образом через illustrator

1. Нужно выделить всю иконку и перевести в кривые https://clck.ru/PW8Zy

2. Увеличиваем высоту svg элемента https://clck.ru/PW8fR

3. Увеличиваем размеры https://clck.ru/PW8nc

4. Сохраняем ctr + shift + s https://clck.ru/PW8tJ

При сохранении svg следующие настройки АНГЛ вариант настроек Save your file as SVG with the following settings:

SVG Profiles: SVG 1.1 Fonts Type: SVG Fonts Subsetting: None Options Image Location: Embed Advanced Options CSS Properties: Presentation Attributes Decimal Places: 1 Encoding: UTF-8 Output fewer elements: check Leave the rest unchecked.

Просмотр иконок на проекте на странице http://localhost:3000/iconlist.html

---

Основные стилевые файлы

/partials variables.less - располагаются все основные переменные (кроме шрифтов) fonts.less подключаем шрифты и там же в конце файла переменные для подкючения в стилях (пример .roboto-bold;)

Основные моменты при работе с PUG

Основные миксины прописаны в section/ui-kit В данную папку НЕ добавляются миксины блоков, пример!! (Есть миксин итема списков продуктов, в данную папку можно добавить)

Основные моменты при работе с icon

Есть 2 варианта использования иконок

1. миксин +icon('test').--test
2. стилями через before/after .example { .icon('close'); }

ВАЖНО!!!! Иконки нужно сохранить по параметрам указанным выше! Иначе иконки будут работать неправильно ВСЕ ЧТО ЕСТЬ НА ПРОЕКТЕ

Что бы сервер был запаролен

даем им права на файлы chmod 444 /home/test/test.kontora-test.ru/www/build/.htaccess chmod 444 /home/test/test.kontora-test.ru/www/build/.htpasswd

Установка необходимых библиотек

К примеру вам необходимо установить slick slider Ищите на https://www.npmjs.com/

https://www.npmjs.com/package/slick-slider нашли скопировали https://clck.ru/PW9Cy НО!!! необходимо прописывать используя --save-dev

$ npm i slick-slider --save-dev

Подключение библиотеки происходит в файле external.js https://clck.ru/PW9QX

После подключения необходимо прописать скрипт инициализации библиотеки в internal.js НО сначала его необходимо создать в папке partials https://clck.ru/PW9X2 Для инициализации используем класс .js-example НЕЛЬЗЯ вешать инит на обычный класс

Создание pull requests

Открываете нужный репозиторий

1. Переходите во вкладку Pull-запросы и жмете Создать pull-запрос https://clck.ru/PWAD7

2. Выбираете свою ветку, выбираете develop куда хотите слиться, прописываете рецензента и жмете Создать https://clck.ru/PWASa

В добрый путь!

Перед отдачей билда клиенту

НЕОБХОДИМО УДАЛИТЬ МЕТА ТЭГ NOINDEX из base_layout.pug И robots.txt

Решения проблем в проекте

---

1. Версия пакета может не подходить для проекта. http://joxi.ru/Vrw8deKIK64dem сделать gulp -v CLI version 3.9.1 Local version 4.0.0-alpha.2 видим что версию CLI надо обновить. решается npm install --global gulp-cli

---