• именование классов по БЭМ
• используется БЭМ-структура
• БЭМ блоки автоматически попадают в сборку, в случае если используются на страницах.
• используется препроцессор SCSS.
• автоматически генерирует фавиконки
• автоматическая генерация service-worker'а и файла manifest.json.
• автоматическая генерация @font-face правил для css, в зависимости от указанных шрифтов.
• используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
• используется Webpack для сборки JavaScript-модулей
• используется жёсткий кодгайд

• установите [NodeJS] (если требуется) и [Yarn]
• скачайте сборку с помощью Git: git clone https://github.com/foxy-develop/gulp-gulp.git
• установите gulp глобально: yarn global add gulp-cli
• перейдите в скачанную папку со сборкой: cd gulp-bem
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn run dev (режим разработки)
• чтобы собрать проект, введите команду yarn run build (режим сборки)

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

gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── pages
│   ├── pug
│   ├── scss
│   └── .htaccess
├── .babelrc.js
├── .bemrc.js
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .pug-lintrc
├── .pug-lintrc.json
├── .stylelintignore
├── .stylelintrc
├── .stylelintrc.json
├── globalConfig.js
├── gulpfile.babel.js
├── package.json
└── README.md

• Корень папки:
  • .babelrc.js — настройки Babel
  • .bemrc.js — настройки БЭМ
  • .eslintrc.json — настройки ESLint
  • .gitignore – запрет на отслеживание файлов Git'ом
  • .stylelintrc — настройки Stylelint
  • .stylelintignore – запрет на отслеживание файлов Stylelint'ом
  • gulpfile.babel.js — настройки Gulp
  • webpack.config.js — настройки Webpack
  • package.json — список зависимостей
• Папка src - используется во время разработки:
  • БЭМ-блоки: src/blocks
  • шрифты: src/fonts
  • изображения: src/img
  • JS-файлы: src/js
  • страницы сайта: src/views/pages
  • SCSS-файлы: src/styles
  • HTML-файлы: src/views
  • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
• Папка dist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
• Папка gulp-tasks - папка с Gulp-тасками

• yarn run lint:style - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm

• Именование классов по БЭМ, разметка в pug, стилизация Sass. См. как работать с CSS-препроцессорами и БЭМ
• Каждый БЭМ-блок в своей папке внутри src/blocks/. Один БЭМ-блок — один pug-файл, один scss-файл, один js-файл.
• Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки.
• Список pug-примесей src/pug/mixins.pug генерируется автоматически, содержит include существующих pug-файлов всех блоков.
• Диспетчер подключения стилей src/scss/_blocks.scss генерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов.
• Входная точка обработки js (src/js/blocks.js) генерируется автоматически, содержит require js-файлов использованных в разметке блоков и доп. файлов.
• Используется относительно жёсткий кодгайд.
• Перед созданием коммита происходит проверка индексированных файлов. При ошибках коммит не происходит, ошибки выводятся в терминал.
• Есть механизм быстрого создания нового блока: node createBlock.js new-block (создаёт pug и scss-файлы). После имени нового блока можно дописать нужные расширения.

Каждый блок лежит в src/blocks/ в своей папке.

Возможное содержимое блока:

demo-block/        # Папка блока.
  bg-img/          # Изображения для использования в стилях (не обрабатываются автоматикой).
  img/             # Изображения, используемые этим блоком (копируются в папку сборки).
  demo-block.pug   # Разметка (pug-примесь, отдающая разметку этого блока, описание API примеси).
  demo-block.scss  # Стилевой файл этого блока (без стилей других блоков).
  demo-block.js    # js-файл блока (без скриптов других блоков).
  readme.md        # Описание для документации, подсказки.

# формат: node createBlock.js ИМЯБЛОКА [доп. расширения через пробел]
node createBlock.js demo-block        # создаст папку блока, demo-block.scss, demo-block.pug
node createBlock.js demo-block js img bg-img # создаст папку блока, demo-block.scss, demo-block.pug, demo-block.js, подпапки img/ и bg-img/ для этого блока

Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.

• страницы проекта находятся в папке src/pages
• главная страница: src/pages/index.pug

• при указании правила font-family в таблице стилей - необходимые шрифты будут автоматически прописаны в конечном стилевом файле
• елси есть необходимость использовать сторонние шрифты - их нужно скопировать в папку src/fonts
• используйте форматы .woff и .woff2
• сторонние шрифты подключаются в файл src/scss/_fonts.scss
• сконвертировать локальные шрифты можно с помощью данного сервиса

• изображения находятся в папке src/img
• изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px
• изображения автоматически конвертируются в формат .webp.

Используется pug.

Все страницы (см. src/pages/index.pug) являются расширениями шаблонов из src/pug (см. наследование шаблонов), в страницах описывается только содержимое «шапки», «подвала» и контентной области (см. блоки).

Каждый блок (в src/blocks/) может содержать одноимённый pug-файл с одноименной примесью, который при старте сервера разработки будет взят includ-ом в файл src/pug/mixins.pug.

Точка входа (src/js/blocks.js) формируется автоматически при старте сервера разработки. Точка входа обрабатывается webpack-ом (с babel-loader).

Для глобальных действий предусмотрен src/js/script.js.

Каждый блок (в src/blocks/) может содержать одноимённый js-файл. Если блок используется в разметке, его js-файл будет взят в сборку стилей.

Если нужно взять в сборку сторонний модуль, то после его установки:

1. Прописать require в js-файле проектного блока (там же писать всё, что касается работы с этим модулем). Если сторонний модуль нужен без привязки к какому-либо проектому блоку, прописать require в src/js/main.js (см. пример в файле).
2. Если нужно брать в сборку стилевые файлы модуля, прописать их в секции addStyleBefore файла config.js (пример в файле).

Диспетчер подключений (src/scss/blocks.scss) формируется автоматически при старте сервера разработки.

Каждый блок (в src/blocks/) может содержать одноимённый scss-файл со стилями этого блока. Если блок используется в разметке, его scss-файл будет взят в сборку стилей.

Используемый постпроцессинг:

1. autoprefixer
2. css-mqpacker
3. postcss-import
4. postcss-inline-svg
5. postcss-object-fit-images (в паре с полифилом)

Автопроверка с stylelint и плагинами. См. .stylelintrc.

1. БЭМ-именование: __ — разделитель элемента, -- — разделитель модификатора.
2. Один Блок = один стилевой файл.
3. Очередность селекторов:
   • Инклуды примесей
   • Стилевые правила сущности
   • Медиаусловия
   • Псевдоселекторы и псевдоэлементы
   • Сторонние вложенные селекторы
   • Элементы блока
   • Модификаторы блока

По умолчанию в сборку берётся [файл с примесями], возвращающими правила модульной сетки. Cелекторов в CSS не добавляет, нужно писать семантические селекторы и вызывать примеси. Настройки по умолчанию вынесены в переменные ($grid-columns: 12; и $grid-gutter-width: 30px;).

• Любое кол-во колонок, в т.ч. разная колоночность на разных ширинах вьюпорта.
• Любые промежутки между колонками, в т.ч. разные на разных ширинах вьюпорта.

.promo {

  &__inner {
    @include container(); // это контейнер, padding по умолчанию (из переменной)
  }

  &__grid {
    @include row();// это прямой родитель сетки, margin по умолчанию (из переменной)
  }

  &__img {
    @include col();      // узкий вьюпорт, 100% ширина и padding по умолчанию
    @include col(md, 5); // MD-вьюпорт (786 по умолчанию) ширина 5 колонок и padding по умолчанию
  }

  &__text {
    @include col();      // узкий вьюпорт, 100% ширина и padding по умолчанию
    @include col(md, 7); // MD-вьюпорт (786 по умолчанию) ширина 7 колонок и padding по умолчанию
  }
}

.row
  // Родитель. Указаны промежутки между ячейками: XS|SM|MD|LG|XL|XXL;
  @include row($grid-gutter-width, 10px, 12px, 16px, 20px, 26px);

  &__element {
    @include col(); // малые ширины — 12 из 12, промежутки по умолчанию
    @include col(sm, 6, $grid-columns, 10px);  // SM (480 по умолчанию) — 6 из 12, промежутки 10px
    @include col(md, 4, $grid-columns, 12px);  // MD (768 по умолчанию) — 4 из 12, промежутки 12px
    @include col(lg, 3, $grid-columns, 16px);  // LG (992 по умолчанию) — 3 из 12, промежутки 16px
    @include col(xl, 2, $grid-columns, 20px);  // XL (1200 по умолчанию) — 2 из 12, промежутки 20px
    @include col(xxl, 1, $grid-columns, 26px); // XXL (1800 по умолчанию) — 1 из 12, промежутки 26px
  }
}