gulp-scss-starter (modified)
Особенности
- именование классов по БЭМ
- используется БЭМ-структура
- используется препроцессор SCSS
- используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
- используется Webpack для сборки JavaScript-модулей
- используется строгий кодгайд
Установка
- установите NodeJS (если требуется)
- установите
gulp
глобально:npm install -g gulp-cli
- перейдите в скачанную папку со сборкой:
cd gulp-scss-starter
- скачайте необходимые зависимости:
npm
- чтобы начать работу, введите команду:
npm run dev
(режим разработки) - чтобы собрать проект, введите команду
npm run build
(режим сборки)
Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.
Файловая структура
gulp-scss-starter
├── gulp-tasks
├── html
│ ├── dist
│ └── src
│ ├── blocks
│ ├── fonts
│ ├── img
│ ├── js
│ ├── styles
│ └── views
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .htaccess
├── .babelrc.js
├── .eslintrc.json
└── .gitignore
- Корень папки:
.babelrc.js
— настройки Babel.eslintrc.json
— настройки ESLint.gitignore
– запрет на отслеживание файлов Git'омgulpfile.babel.js
— настройки Gulpwebpack.config.js
— настройки Webpackpackage.json
— список зависимостей
- Папка
src
- используется во время разработки:- БЭМ-блоки:
src/blocks
- шрифты:
src/fonts
- изображения:
src/img
- JS-файлы:
src/js
- страницы сайта:
src/views/pages
- SCSS-файлы:
src/styles
- HTML/PHP-файлы:
src/views
- конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь):
src/.htaccess
- БЭМ-блоки:
- Папка
dist
- папка, из которой запускается локальный сервер для разработки (при запускеyarn run dev
) - Папка
gulp-tasks
- папка с Gulp-тасками
Команды
npm run dev
- запуск сервера для разработки проектаnpm run build
- собрать проект с оптимизацией без запуска сервераnpm run build views
- скомпилировать Pug-файлыnpm run build styles
- скомпилировать SCSS-файлыnpm run build scripts
- собрать JS-файлыnpm run build images
- собрать изображенияnpm run build webp
- сконвертировать изображения в формат.webp
npm run build sprites
- собрать спрайтыnpm run build fonts
- собрать шрифтыnpm run build favicons
- собрать фавиконкиnpm run build gzip
- собрать конфигурацию Apache
Рекомендации по использованию
Компонентный подход к разработке сайтов
- каждый БЭМ-блок имеет свою папку внутри
src/blocks/modules
- папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
- HTML-файл блока импортируется в файл
src/views/index.html
(или в необходимый файл страницы, откуда будет вызываться блок) - SCSS-файл блока импортируется в файл
src/blocks/modules/_modules.scss
- JS-файл блока импортируется в
src/js/import/modules.js
- HTML-файл блока импортируется в файл
Пример структуры папки с БЭМ-блоком:
blocks
├── modules
│ ├──header
│ │ ├── header.html
│ │ ├── header.js
│ │ ├── header.scss
Страницы проекта
- страницы проекта находятся в папке
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ь командой
npm install package_name
- для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
import $ from "jquery";
- для подключения стилевых файлов библиотек импортируйте их в файл
src/styles/vendor/_libs.scss
- JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя
- для их загрузки воспользуйтеcь командой
⛔ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:
- по пути
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-файлы на необходимых страницах