andrewalexeich / gulp-pug-starter

Frontend development with pleasure. Pug + SCSS version
GNU General Public License v3.0
296 stars 101 forks source link
babel bem css development-environment development-tools development-workflow es6 gulp html javascript js pug sass scss starter starter-kit starter-project web web-development webpack

gulp-pug-starter

License GitHub stars GitHub watchers

:fire: Особенности

:hammer_and_wrench: Установка

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

:open_file_folder: Файловая структура

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

:keyboard: Команды

:bulb: Рекомендации по использованию

Компонентный подход к разработке сайтов

Пример структуры папки с БЭМ-блоком:

blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующие команды:

Компоненты

Страницы проекта

Шрифты

Изображения

SVG-спрайты

Для создания спрайтов изображения .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> 

Сторонние библиотеки

:point_right: Нужен SCSS без Pug?

Используйте эту сборку.

:yellow_heart: Нравится проект?

Сообщайте мне о багах, ставьте звёздочку, задонатьте мне Telegram TON на пиво :beer:

:envelope: Контакты

По всем вопросам пишите в Telegram