- установите Node.js (если требуется) и Yarn:
npm install --global yarn
- скачайте сборку в консоли с помощью Git:
git clone https://github.com/Apnoea/gulp-bem-template.git
- перейдите в скачанную папку со сборкой:
cd gulp-bem-template
- скачайте необходимые зависимости:
yarn
- чтобы начать работу, введите команду:
yarn start
(режим разработки) - чтобы собрать проект, введите команду
yarn build
(режим сборки)
Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.
gulp-bem-template
├── build
├── gulp-tasks
├── src
│ ├── blocks
│ ├── fonts
│ ├── images
│ ├── js
│ ├── layouts
│ └── styles
├── .bem-template-pug.js
├── .bem-template-scss.js
├── .bemrc.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .gitlab-ci.yml
├── .pug-lint.json
├── .stylelintrc.json
├── gulpfile.mjs
├── package.json
└── webpack.config.mjs
- Папка
build
- папка, из которой запускается локальный сервер для разработки (при запускеyarn start
) - Папка
gulp-tasks
- папка с Gulp-тасками - Папка
src
- используется во время разработки:- блоки:
src/blocks
- шрифты:
src/fonts
- изображения:
src/images
- JS-файлы:
src/js
- основной макет сайта:
src/layouts
- SCSS-файлы:
src/styles
- страницы сайта:
src/*.pug
- блоки:
yarn start
- запуск сервера для разработки проектаyarn build
- собрать проект с оптимизацией без запуска сервераyarn script
- собрать только jsyarn bem
- добавить bem блок
- блоки проекта находятся в папке
src/blocks
- блоки, созданные командой
yarn bem
, автоматически подключаются в файл:src/blocks/mixins.pug
- блоки, созданные командой
- каталог блока содержит в себе файлы разметки, стилей и, по необходимости, скриптов
- страницы проекта находятся в корне папки
src/*.pug
- шрифты находятся в папке
src/fonts
- используйте форматы
.woff2
и.woff
- шрифты подключаются в файле
src/styles/utils/fonts.scss
- сконвертировать локальные шрифты можно с помощью данного сервиса
- используйте форматы
- изображения находятся в папке
src/images
- изображения автоматически минифицируются с сохранением структуры папок
- из изображений формата
.svg
формируется спрайтbuild/img/sprite.svg
- отдельные
.svg
доступны по путиbuild/img/svgs
- для вложенных изображений создается префикс с названием папки, к примеру
main--icon_circle.svg
- отдельные
- все сторонние библиотеки устанавливаются в папку
node_modules
- для их загрузки воспользуйтеcь командой
yarn add package_name
- для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла, например:
import $ from 'jquery'
- для подключения стилевых файлов библиотек импортируйте их в файл
src/styles/layouts/style.scss
- JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя
- для их загрузки воспользуйтеcь командой
- Telegram: @Alex K