Сборка Gulp

Содержание

• Быстрый старт
• Структура проекта
• Команды запуска
• Заметки
  • Создание БЭМ блока
  • Использование svg спрайта
• Ошибки

Быстрый старт

• Установить Node.JS
• Склонировать репозиторий [email protected]:prikhodkin/gulp_prikhodkin.git
• Перейти в папку со сборкой
• Установить npm зависимости npm i
• Запустить проект npm run dev

Структура проекта

gulp_prikhodkin
├── dist
├── gulp
├── src
│   ├── blocks
│   ├── css
│   ├── fonts
│   ├── img
│   ├── js
│   ├── scss
│   └── view
├── gulpfile.babel.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
├── .gitignore
└── .editorconfig

Команды запуска

Режим разработки

npm run dev

Режим продакш.

Минифицирует css/ js/ img, так создает json manifest для css и js. Результат сборки папка dist

npm run build

Публикация на GitHub Pages

npm run deploy

Заметки

Создание БЭМ блока

В папке blocks создается папка my-block .
Структура:

my-block
├── my-block.html
├── my-block.scss
└── my-block.js

bem create my-block

Использование svg спрайта

<svg class="svg">
 <use xlink:href="img/sprites/sprite.svg#icon"></use>
</svg> 

Ошибки

• При создании БЭМ блока ответ консоли: -bash: $: command not found

export PATH=./node_modules/.bin:$PATH