- Установить Node.JS
- Склонировать репозиторий
git@github.com:prikhodkin/gulp_prikhodkin.git - Перейти в папку со сборкой
- Установить npm зависимости
npm i - Запустить проект
npm run dev - При необходимости изменить конфиг, создать файл user-config.js в директории
gulp
gulp_prikhodkin | Корень проекта
├── gulp | Файлы для настроек галпа
│ ├── task | Таски для галпа
│ └── user-config.js | Конфигурация проекта (переименовать в config.js)
├── src | Исходные файлы
│ ├── blocks | БЭМ блоки
│ │ ├── block | БЭМ Блок
│ │ │ ├── block.html | Разметка блока
│ │ │ └── block.scss | Стили блока
│ │ └── general-blocks.scss | Общий файл стилей, в который импортируются все стили общих блоков
│ ├── fonts | Шрифты
│ ├── img | Изображения
│ │ ├── icons | Иконки
│ │ │ └── svg | SVG файлы для спрайта
│ │ └── favicons | Фавиконки
│ ├── js | JS файлы
│ ├── scss | Файлы стилей
│ │ ├── helpers | Помощники
│ │ │ ├── _global.scss | Глобальные стили сайта
│ │ │ ├── _fonts.scss | Подключение шрифтов
│ │ │ ├── _mixins.scss | Примеси
│ │ │ ├── _normalize.scss | Сброс стандартных стилей
│ │ │ ├── _libs.scss | Стили от библиотек
│ │ │ └── _variables.scss | Переменные
│ │ └── main.scss | Основной файл стилей, импортирует все остальные стиливые файлы
│ └── pages | Страницы проекта
│ └── index | Директория страницы
│ ├── index.html | Разметка страницы
│ ├── index.scss | Файл стилей страницы, в который импортируются нужные стили из блоков
│ └── index.js | Js файл страницы, в который импортируются нужные js файлы из блоков
├── .bemrc.js | Конфигурация bem create
├── .editorconfig | Конфигурация редактора
├── .gitignore | Исключенные файлы из git
├── .gitlab-ci.yml | Конфигурация для GitLab Pages
├── .stylelintrc | Концигурация StyleLint
├── gulpfile.js | Конфигурация Gulp
├── webpack.config.js | Конфигурация WebPack
└── package.json | Список зависимостей
npm run dev
Минифицирует css/ js/ img, так создает json manifest для css и js. Результат сборки папка dist
npm run build
Публикация на GitHub Pages
npm run ghp
Публикация на GitLab Pages
Для публикации на GitLab Pages необходимо сделать push в ветку pages.
git push origin pages
Путь для директории редактируется в gulp/config.js
npm run deploy
npm run test
npm run fix
Если в проекте используются сторонние библиотеки, необходимо подключить файл vendor.js на страницу
Для добавление новой библиотеки, необходимо установить пакет с помощью команды
npm install pack-name --save
После установки пакета, необходимо импортировать в нужном месте
import var from "pack-name"
Библиотека успешно добавлена в проект.
- jQuery - Библиотека jQuery;
- Stimulus - Фреймворк Stimulus;
- vh-check - Утилита для высоты экрана на мобильных устройствах;
- WOW - Анимация появления элементов при скролле;
- Slick - Слайдер;
- hc-sticky - Библиотека для создания "липких" элементов;
В папке blocks создается папка my-block .
Структура:
my-block
├── my-block.html
├── my-block.scss
└── my-block.js
bem create my-block
Папка в которой хранятся svg иконки
img | Изображения
└── icons | Иконки
└── svg | SVG файлы для спрайта
Вызов спрайта
<svg class="svg">
<use xlink:href="img/sprites/sprite.svg#icon"></use>
</svg>
Подключение js модулей
import var from "%modules%/block-name/file-name.js"
Подключения html файлов
@@include('../../blocks/dir-name/file-name.html')
Подключение html файлов с передачей данных
@@include('../../blocks/dir-name/file-name.html', {
"key": "value"
})
@@loop('../../blocks/dir-name/file-name.html', [
{ "key": "value" },
{ "key": "value" },
])
Шаблон подключаемого файла с данными
<section>
<h1>@@key</h1>
</section>
- При создании БЭМ блока ответ консоли:
-bash: $: command not found
Если данная ошибка появляется каждый раз, при новой сессии терминала, данную строку необходимо добавить в конфигурационный файл оболочки вашего терминала
export PATH=./node_modules/.bin:$PATH