gulp-scss-starter

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

• именование классов по БЭМ


• используется БЭМ-структура


• используется препроцессор SCSS


• используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах


• используется Webpack для сборки JavaScript-модулей


• используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки


• используется жёсткий кодгайд


• используется проверка кода на ошибки перед коммитом

🛠️
Установка

• установите NodeJS 12-ой версии (на новых версиях NodeJS имеются проблемы с установкой некоторых пакетов) и Yarn


• скачайте сборку с помощью Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git


• установите gulp глобально: yarn global add gulp-cli


• установите bem-tools-core глобально: yarn global add bem-tools-core


• перейдите в скачанную папку со сборкой: cd gulp-scss-starter


• скачайте необходимые зависимости: yarn


• чтобы начать работу, введите команду: yarn run dev (режим разработки)


• чтобы собрать проект, введите команду yarn run build (режим сборки)

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

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

gulp-scss-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
  
  
  • HTML-файлы: 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 - собрать HTML-файлы


• 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


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

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

blocks

├── modules

│   ├──header

│   │   ├── header.html

│   │   ├── 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 - имя компонента

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

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

Шрифты

• шрифты находятся в папке 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?

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

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

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

• На PayPal


• На карту - 5536 9137 5288 1934

✉️
Контакты

• ВКонтакте: @andreyalexeich


• Telegram: @andreyalexeich