git clone https://github.com/andreyalexeich/gulp-pug-starter.git
cd gulp-pug-starter
yarn set version berry
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
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore
.babelrc.js
— настройки Babel.bemrc.js
— настройки БЭМ.eslintrc.json
— настройки ESLint.gitignore
– запрет на отслеживание файлов Git'ом.stylelintrc
— настройки Stylelint.stylelintignore
– запрет на отслеживание файлов Stylelint'ом.yarnrc.yml
– настройка Yarngulpfile.babel.js
— настройки Gulpwebpack.config.js
— настройки Webpackpackage.json
— список зависимостейsrc
- используется во время разработки:
src/blocks
src/fonts
src/img
src/js
src/views/pages
src/styles
src/views
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 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
- собрать конфигурацию Apacheyarn run bem-m
- добавить БЭМ-блокyarn run bem-c
- добавить компонентyarn run lint:styles --fix
- исправить ошибки в SCSS-файлах согласно настройкам Stylelintyarn run lint:scripts
- проверить JS-файлыyarn run lint:scripts --fix
- исправить ошибки в JS-файлах согласно настройкам ESLintsrc/blocks/modules
src/views/index.pug
(или в необходимый файл страницы, откуда будет вызываться блок)src/blocks/modules/_modules.scss
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
- имя БЭМ-блока (после создания нужно удалить содержимое js-файла БЭМ-блока); yarn run bem-с my-component
- для создания компонента в src/blocks/components
(для компонентов), где my-component
- имя компонента (после создания нужно удалить содержимое js-файла БЭМ-компонента);src/blocks/components
src/views/index.pug
(или в необходимый файл страницы, откуда будет вызываться компонент)src/blocks/components/_components.scss
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
.webp
. Подробная информация по использованию тутsrc/img/favicon
и иметь размер не менее 1024px x 1024px
Для создания спрайтов изображения .svg
должны находиться в папке src/img/sprites
. Например, у нас есть файлы icon-1.svg
, icon-2.svg
и icon-3.svg
, и мы должны обратиться к icon-2.svg
. Для этого в HTML нужно воспользоваться тегом use
:
svg
use(xlink:href="https://github.com/andrewalexeich/gulp-pug-starter/blob/master/img/sprites/sprite.svg#logo")
Изменить стили svg-иконки из спрайта в CSS:
svg use {
fill: red;
}
Бывает такая ситуация, когда стили иконки поменять не получается. Это связано с тем, что при экспорте из Figma в svg добавляется лишний код. Например:
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z" fill="#1B1B1D"/>
</svg>
Нужно удалить fill="none"
и fill="#1B1B1D"
. Должно получиться так:
<svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
<path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z"/>
</svg>
node_modules
yarn add package_name
import $ from "jquery";
src/styles/vendor/_libs.scss
Используйте эту сборку.
Сообщайте мне о багах, ставьте звёздочку, задонатьте мне Telegram TON на пиво :beer:
По всем вопросам пишите в Telegram