mmeitneriumm/frontend.mospolytech

study: main page

Uplab Frontend boilerplate template

Сборщик Twig, SCSS (SASS), js (es6), json

Такая структура делалась для того, чтобы увеличить скорость интеграции – бэкенд разработчики просто передают данные с заранее продуманной структурой в наши компоненты twig

Подготовка

Для начала разработки необходимо либо клонировать репозиторий к себе, удалить папку .git и инициализировать уже новый репозиторий под проект. Либо сделать fork.

// клонирование в папку <project>
git clone <ссылка на репозиторий> <project>
// удаление папки .git
cd <project> && rm -rf .git

Запуск

npm i            # установка зависимостей
npm ci           # установка зависимостей из package-lock.json
npm run "<task>" # запуск сценария
                 # <start> - локальный запуск проекта с отслеживанием изменений в файлах
                 # <build> - сборка в продакшн режиме
                 # <build:debug> - сборка в дев режиме, для отладки багов на интеграции
                 # <update> - подтягивание последних изменений и сборка в продакшн режиме
                 # <build:assets> - ускоренная сборка без обновления разметки
                 # <stats> - статистика по js бандлу

Работа со сборщиком

Компоненты

Находятся в папке src/include/@atoms/ (src/include/^molecules/, src/include/&organisms), могут содержать в себе файлы с расширениями scss (sass) / twig / js / json. Названия файлов должны быть либо index, либо должны совпадать с названием компонента (папки).

Пример компонента button:

button/
├── button.js   // скрипты
├── button.json // данные компонента
├── button.scss // стили
└── button.twig // разметка

Использование компонента button:

{% view '@button' %}
или с данными
{% view '@button' with {button: {param1: 1, param2: 2}} %}
{% view '@button' with {button: button_in_footer} %}

{% view '@button' with button_in_footer %} // Это будет работать только если внутри button_in_footer есть объект 'button'. Например:
{
    ...
    "button": {
        "text": "example"
    }
    ...
}

@ - это алиас для компонентов в папке @atoms, ^ - это алиас для компонентов в папке ^molecules, & - это алиас для компонентов в папке &organisms.

JSON-данные

• Расположены в папке data, соответствуют названию страницы. К примеру, данные файла data/about.json будет подгружаться для страницы src/pages/about.twig
• Могут относиться к отдельным компонентам, и располагаться в папках компонентов.

Изображения

Постоянные файлы

Иконки и изображения, подключаемые в стилях, а также svg, подключаемые через {% svg 'name' %}, находятся в src/img.

Создавать отдельную папку для svg не нужно. Все иконки и так в основном являются svg.

Желательно подготоваливать все svg одних размеров (или нескольких групп размеров - 32, 56, 136).

Прогонять все svg через imageOptim (без svgo). Проверять на наличие viewBox, width, height, иначе будут ломаться в разных браузерах.

Так же лучше изменять внутри svg все fill и stroke на currentColor, чтобы менять цвет можно было стилями и одиночным свойством color.

Временные файлы

Изображения, видео и прочий временный контент, который подразумевает загрузку пользователем (изображения карточек, слайдеров, фон hero и т.д.), должен храниться в public/tmp, чтобы на интеграции эту папку можно было удалить.

Папки img и public копируются в dist.

TODO

Переделать слежение файлов с Gulp на webpack-stream (ускорит время обновления браузера).

Решение проблем

В случае не хватки памяти (обвала сборщика)

Прописываем package.json

"scripts": {
    "dev": "node --max-old-space-size=8192 node_modules/cross-env/src/bin/cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js"
}