Awesome Open Source
Awesome Open Source

gulp-pug-starter

GitHub release dependencies Status devDependencies Status GitHub stars GitHub watchers

🔥 Особенности

  • именование классов по БЭМ
  • используется БЭМ-структура
  • используются препроцессоры Pug и SCSS
  • используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
  • используется Webpack для сборки JavaScript-модулей
  • используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
  • используется жёсткий кодгайд
  • используется проверка кода на ошибки перед коммитом

🛠 Установка

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

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

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

gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore
  • Корень папки:
    • .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
    • служебные Pug-файлы: src/views
    • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
  • Папка dist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
  • Папка gulp-tasks - папка с Gulp-тасками

⌨️ Команды

  • yarn run lint:styles - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint (ошибки будут исправлены автоматически при сохранении файла)
  • yarn run lint:styles --fix - исправить ошибки в SCSS-файлах
  • yarn run lint:scripts - проверить JS-файлы
  • yarn run lint:scripts --fix - исправить ошибки в JS-файлах
  • yarn run dev - запуск сервера для разработки проекта
  • yarn run build - собрать проект с оптимизацией без запуска сервера
  • yarn run build:views - скомпилировать Pug-файлы
  • yarn run build:styles - скомпилировать SCSS-файлы
  • yarn run build:scripts - собрать JS-файлы
  • yarn run build:images - собрать изображения
  • yarn run build:webp - сконвертировать изображения в формат .webp
  • yarn run build:sprites- собрать спрайты
  • yarn run build:fonts - собрать шрифты
  • yarn run build:favicons - собрать фавиконки
  • yarn run build:gzip - собрать конфигурацию Apache
  • yarn run bem-m - добавить БЭМ-блок
  • yarn run bem-c - добавить компонент

💡 Рекомендации по использованию

Компонентный подход к разработке сайтов

  • каждый БЭМ-блок имеет свою папку внутри src/blocks/modules
  • папка одного БЭМ-блока содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
    • Pug-файл блока импортируется в файл src/views/index.pug (или в необходимый файл страницы, откуда будет вызываться блок)
    • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
    • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующие команды:

  • yarn run bem-m my-block - для создания БЭМ-блока в src/block/modules (для основных БЭМ-блоков), где my-block - имя БЭМ-блока;
  • yarn run bem-с my-component - для создания компонента в src/blocks/components (для компонентов), где my-component - имя компонента

Компоненты

  • компоненты (например, иконки, кнопки) оформляются в Pug с помощью примесей
  • каждый компонент имеет свою папку внутри src/blocks/components
  • папка одного компонента содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у компонента используется скрипт)
    • Pug-файл компонента импортируется в файл главной страницы src/views/index.pug (или в необходимый файл страницы, откуда будет вызываться компонент)
    • SCSS-файл компонента импортируется в файл src/blocks/components/_components.scss
    • JS-файл компонента импортируется в файл src/js/import/components.js

Страницы проекта

  • страницы проекта находятся в папке src/views/pages
    • каждая страница (в том числе главная) наследует шаблон src/views/layouts/default.pug
    • главная страница: src/views/index.pug

Шрифты

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

Изображения

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

Сторонние библиотеки

  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой yarn add package_name
    • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
    import $ from "jquery";
    
    • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
    • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

⚠️ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:

  • по пути src/js/import создать папку pages
  • в папке pages создать js-файл для страницы, например, pageA.js, и импортировать туда библиотеку, которая будет использоваться только на этой странице
    • аналогично проделать шаг для дополнительных страниц
  • в файле webpack.config.js в точку входа добавить js-файлы страниц, пример:
entry: {
    main: "./src/js/index.js",
    pageA: "./src/js/import/pages/pageA.js",
    pageB: "./src/js/import/pages/pageB.js"
}
  • подключить скомпилированные js-файлы на необходимых страницах

#️⃣ CSS-сетка smart-grid

В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. Инструкция по использованию здесь.

👉 Нужен SCSS без Pug?

Используйте эту сборку.

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

Сообщайте мне о багах, ставьте звёздочку в правом верхнем углу, задонатьте мне на пиво 🍺

✉️ Контакты


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,538,296
Html (424,114
Css (214,022
Scss (16,243
Webpack (9,626
Js (9,369
Web (7,545
Sass (5,930
Es6 (5,406
Babel (3,218
Gulp (2,728
Web Development (1,960
Pug (1,462
Starter Kit (1,392
Starter (1,239
Development Environment (518
Bem (368
Starter Project (365
Development Tools (259
Related Projects