Стартовый проект с gulp & webpack

Парадигма

• Именование классов по БЭМ, стилизация Sass. См. как работать с CSS-препроцессорами и БЭМ
• Каждый БЭМ-блок со стилевым файлом в своей папке внутри source/scss/components.
• Диспетчер подключения стилей source/scss/style.scss генерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов.
• Входная точка обработки js (source/js/script.js) содержит import компонентов и доп. файлов.
• Используется относительно жёсткий кодгайд.

Команды

npm start          # запуск сервера разработки
npm start deploy   # отправка содержимого папки сборки на gh-pages (нужен репозиторий на github.com)
npm run build      # сборка для production без запуска сервера разработки
npm run test       # проверка всех scss- и js-файлов на соответствие правилам (см. .stylelintrc и eslintrc соответственно)
npm run test:style # проверить только scss-файлы
npm run test:js    # проверить только js-файлы

Структура

build/                     # Папка сборки
source/                    # Исходники
  blocks/                  # Блоки
  fonts/                   # Шрифты
  img/                     # Доп. изображения
  pages/                   # Страницы проекта
  template-parts/          # html блоки для сайтовой шапки и футера
  scss/                    # Служебные стилевые файлы
  scss/components          # SCSS файлы БЭМ-блоков
  scss/components/shared   # SCSS файлы атомарных БЭМ-блоков

Как это работает

При npm start запускается дефолтная задача gulp:

1. Очищается папка сборки (build/).
2. В index.html подключаються части шаблонов из (source/template-parts/**/*).
3. Генерируются спрайты (если используются), в папку сборки
4. Записывается диспетчер подключения стилей source/scss/style.scss, в котором:
   • Импорты файлов переменных и примесей.
   • Импорты файлов БЭМ-блоков.
5. Записывается диспетчер подключений скриптов source/js/script.js, в котором:
   • import компонентов, использующихся в разметке.
6. Компилируются и обрабатываются PostCSS-ом стили (source/scss/style.scss).
7. Javascript (source/js/script.js) собирается webpack-ом.
8. Запускается локальный сервер и слежение за файлами для пересборки.

Блоки

Каждый блок со стилевым файлом лежит в source/scss/components.

Стили

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

1. autoprefixer
2. css-mqpacker
3. postcss-inline-svg

Стилевой код-гайд

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

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

Скрипты

Точка входа обрабатывается webpack-ом (с babel-loader).

Нравится проект?

Ставьте звезду в верхнем правом углу