Особенности сборки

• используется БЭМ-структура
• именование классов по БЭМ
• используется препроцессор SCSS
• используется CSS-сетка на основе @media запросов
• оптимизация картинок, конвертация в формат webp, ретинизация
• также используем сборку SVG в спрайты и вызов через include
• минификация html, css, js файлов
• используется кодгайд

Установка

• установите NodeJS (если требуется) и npm
• скачайте сборку в консоли с помощью Git: git clone https://github.com/ErikKopcha/starting-template.git
• установите gulp глобально: npm i -g gulp gulp-cli
• перейдите в скачанную папку со сборкой: cd starting-template
• скачайте необходимые зависимости: npm i
• чтобы начать работу, введите команду: npm start
• чтобы собрать проект, введите команду npm run build

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: собрание SVG спрайта, сжатие изображений, конвертирование изображений в WebP формат, минифицирование HTML, CSS и JS-файлов для загрузки на сервер.

Файловая структура

starter
├── build
├── source
│   ├── css
│   ├── fonts
│   ├── img
│   ├── js
│   ├── sass
│   |   ├── base
│   |   ├── blocks
│   |   ├── style.scss
│   ├── index.html
├── gulpfile.js
├── package.json
├── package-lock.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

• Корень папки:

  • .gitignore – запрет на отслеживание файлов Git'ом
  • .stylelintrc — настройки Stylelint
  • .stylelintignore – запрет на отслеживание файлов Stylelint'ом
  • gulpfile.js — настройки Gulp
  • package.json — список зависимостей

• Папка source - используется во время разработки:

  • БЭМ-блоки и компоненты: source/blocks
  • шрифты: source/fonts
  • изображения: source/img
  • JS-файлы: source/js
  • SCSS-файлы: source/sass

Команды

• npm run build - собрать проект с оптимизацией без запуска сервера
• npm start - собрать проект с оптимизацией и запуском сервера