{"id":14967540,"url":"https://github.com/andrewalexeich/gulp-pug-starter","last_synced_at":"2026-06-30T19:00:41.493Z","repository":{"id":33009491,"uuid":"146933974","full_name":"andrewalexeich/gulp-pug-starter","owner":"andrewalexeich","description":"Frontend development with pleasure. Pug + SCSS version","archived":false,"fork":false,"pushed_at":"2023-06-10T11:07:19.000Z","size":8883,"stargazers_count":294,"open_issues_count":6,"forks_count":97,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-09-03T03:57:33.323Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrewalexeich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-31T19:21:33.000Z","updated_at":"2025-08-18T00:37:49.000Z","dependencies_parsed_at":"2024-08-23T14:35:29.409Z","dependency_job_id":null,"html_url":"https://github.com/andrewalexeich/gulp-pug-starter","commit_stats":null,"previous_names":["andrewalexeich/gulp-pug-starter","andreyalexeich/gulppack-pug","andreyalexeich/gulp-pug-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/andrewalexeich/gulp-pug-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-pug-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-pug-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-pug-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-pug-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewalexeich","download_url":"https://codeload.github.com/andrewalexeich/gulp-pug-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-pug-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34979578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T13:38:13.722Z","updated_at":"2026-06-30T19:00:41.457Z","avatar_url":"https://github.com/andrewalexeich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-pug-starter\n\n![License](https://img.shields.io/github/license/andreyalexeich/gulp-pug-starter)\n![GitHub stars](https://img.shields.io/github/stars/andreyalexeich/gulp-pug-starter.svg?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/andreyalexeich/gulp-pug-starter.svg?style=social)\u003cbr\u003e\n\u003ca href=\"https://t.me/andrewalexeich\"\u003e\u003cimg src=\"https://img.shields.io/badge/Donate%20to%20me%20(Telegram%20TON)-UQC5GESVoOmFKJ8Khw8wwGIM3stCsnrXRHDcdfHvVjwR4ddL-blue?style=for-the-badge\"\u003e\u003c/a\u003e\n\n## :fire: Особенности\n* именование классов по [БЭМ](https://ru.bem.info/)\n* используется БЭМ-структура\n* используются препроцессоры [Pug](https://pugjs.org/) и [SCSS](https://sass-lang.com/)\n* используется транспайлер [Babel](https://babeljs.io/) для поддержки современного JavaScript (ES6) в браузерах\n* используется [Webpack](https://webpack.js.org/) для сборки JavaScript-модулей\n* используется жёсткий кодгайд\n* используется проверка кода на ошибки перед коммитом\n\n## :hammer_and_wrench: Установка\n* установите [NodeJS](https://nodejs.org/en/)\n* установите глобально:\n    * [Yarn](https://yarnpkg.com/getting-started): ```npm i -g yarn```\n    * [Gulp](https://gulpjs.com/): ```npm i -g gulp```\n    * [Bem Tools](https://www.npmjs.com/package/bem-tools-core): ```npm i -g bem-tools-core```\n* скачайте сборку с помощью [Git](https://git-scm.com/downloads): ```git clone https://github.com/andreyalexeich/gulp-pug-starter.git```\n* перейдите в скачанную папку со сборкой: ```cd gulp-pug-starter```\n* введите ```yarn set version berry```\n* скачайте необходимые зависимости: ```yarn```\n* чтобы начать работу, введите команду: ```yarn run dev``` (режим разработки)\n* чтобы собрать проект, введите команду ```yarn run build``` (режим сборки)\n\nЕсли вы всё сделали правильно, у вас должен открыться браузер с локальным сервером.\nРежим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.\n\n## :open_file_folder: Файловая структура\n\n```\ngulp-pug-starter\n├── dist\n├── gulp-tasks\n├── src\n│   ├── blocks\n│   ├── fonts\n│   ├── img\n│   ├── js\n│   ├── styles\n│   ├── views\n│   └── .htaccess\n├── gulpfile.babel.js\n├── webpack.config.js\n├── package.json\n├── .yarnrc.yml\n├── .babelrc.js\n├── .bemrc.js\n├── .eslintrc.json\n├── .stylelintrc\n├── .stylelintignore\n└── .gitignore\n```\n\n* Корень папки:\n    * ```.babelrc.js``` — настройки Babel\n    * ```.bemrc.js``` — настройки БЭМ\n    * ```.eslintrc.json``` — настройки ESLint\n    * ```.gitignore``` – запрет на отслеживание файлов Git'ом\n    * ```.stylelintrc``` — настройки Stylelint\n    * ```.stylelintignore``` – запрет на отслеживание файлов Stylelint'ом\n    * ```.yarnrc.yml``` – настройка Yarn\n    * ```gulpfile.babel.js``` — настройки Gulp\n    * ```webpack.config.js``` — настройки Webpack\n    * ```package.json``` — список зависимостей\n* Папка ```src``` - используется во время разработки:\n    * БЭМ-блоки и компоненты: ```src/blocks```\n    * шрифты: ```src/fonts```\n    * изображения: ```src/img```\n    * JS-файлы: ```src/js```\n    * страницы сайта: ```src/views/pages```\n    * SCSS-файлы: ```src/styles```\n    * служебные Pug-файлы: ```src/views```\n    * конфигурационный файл веб-сервера Apache с настройками [gzip](https://habr.com/ru/post/221849/) (сжатие без потерь): ```src/.htaccess```\n* Папка ```dist``` - папка, из которой запускается локальный сервер для разработки (при запуске ```yarn run dev```)\n* Папка ```gulp-tasks``` - папка с Gulp-тасками\n\n## :keyboard: Команды\n* ```yarn run lint:styles``` - проверить SCSS-файлы. Для VSCode необходимо установить [плагин](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint). Для WebStorm\nили PHPStorm необходимо включить Stylelint в ```Languages \u0026 Frameworks - Style Sheets - Stylelint``` (ошибки будут исправлены автоматически при сохранении файла)\n* ```yarn run dev``` - запуск сервера для разработки проекта\n* ```yarn run build``` - собрать проект с оптимизацией без запуска сервера\n* ```yarn run build:views``` - скомпилировать Pug-файлы\n* ```yarn run build:styles``` - скомпилировать SCSS-файлы\n* ```yarn run build:scripts``` - собрать JS-файлы\n* ```yarn run build:images``` - собрать изображения\n* ```yarn run build:webp``` - сконвертировать изображения в формат ```.webp```\n* ```yarn run build:sprites```- собрать спрайты\n* ```yarn run build:fonts``` - собрать шрифты\n* ```yarn run build:favicons``` - собрать фавиконки\n* ```yarn run build:gzip``` - собрать конфигурацию Apache\n* ```yarn run bem-m``` - добавить БЭМ-блок\n* ```yarn run bem-c``` - добавить компонент\n* ```yarn run lint:styles --fix``` - исправить ошибки в SCSS-файлах согласно настройкам Stylelint\n* ```yarn run lint:scripts``` - проверить JS-файлы\n* ```yarn run lint:scripts --fix``` - исправить ошибки в JS-файлах согласно настройкам ESLint\n\n## :bulb: Рекомендации по использованию\n### Компонентный подход к разработке сайтов\n* каждый БЭМ-блок имеет свою папку внутри ```src/blocks/modules```\n* папка одного БЭМ-блока содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)\n    * Pug-файл блока импортируется в файл ```src/views/index.pug``` (или в необходимый файл страницы, откуда будет вызываться блок)\n    * SCSS-файл блока импортируется в файл ```src/blocks/modules/_modules.scss```\n    * JS-файл блока импортируется в ```src/js/import/modules.js```\n\nПример структуры папки с БЭМ-блоком:\n```\nblocks\n├── modules\n│   ├── header\n│   │   ├── header.pug\n│   │   ├── header.js\n│   │   ├── header.scss\n```\n\nЧтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующие команды:\n* ```yarn run bem-m my-block``` - для создания БЭМ-блока в ```src/block/modules``` (для основных БЭМ-блоков), где ```my-block``` - имя БЭМ-блока (после создания нужно удалить содержимое js-файла БЭМ-блока); \n* ```yarn run bem-с my-component``` - для создания компонента в ```src/blocks/components``` (для компонентов), где ```my-component``` - имя компонента (после создания нужно удалить содержимое js-файла БЭМ-компонента);\n\n### Компоненты\n* компоненты (например, иконки, кнопки) оформляются в Pug с помощью примесей\n* каждый компонент имеет свою папку внутри ```src/blocks/components```\n* папка одного компонента содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у компонента используется скрипт)\n    * Pug-файл компонента импортируется в файл главной страницы ```src/views/index.pug``` (или в необходимый файл страницы, откуда будет вызываться компонент)\n    * SCSS-файл компонента импортируется в файл ```src/blocks/components/_components.scss```\n    * JS-файл компонента импортируется в файл ```src/js/import/components.js```\n\n### Страницы проекта\n* страницы проекта находятся в папке ```src/views/pages```\n    * каждая страница (в том числе главная) наследует шаблон ```src/views/layouts/default.pug```\n    * главная страница: ```src/views/index.pug```\n\n### Шрифты\n* шрифты находятся в папке ```src/fonts```\n    * используйте [форматы](https://caniuse.com/#search=woff) ```.woff``` и ```.woff2```\n    * шрифты подключаются в файл ```src/styles/base/_fonts.scss```\n    * сконвертировать локальные шрифты можно с помощью [данного сервиса](https://onlinefontconverter.com/)\n\n### Изображения\n* изображения находятся в папке ```src/img```\n    * изображения автоматически конвертируются в формат ```.webp```. Подробная информация по использованию [тут](https://vk.com/@vk_it-webp)\n    * изображение для генерации фавиконок должно находиться в папке ```src/img/favicon``` и иметь размер не менее ```1024px x 1024px```\n\n### SVG-спрайты\nДля создания спрайтов изображения ```.svg``` должны находиться в папке ```src/img/sprites```. Например, у нас есть файлы ```icon-1.svg```, ```icon-2.svg``` и ```icon-3.svg```, и мы должны обратиться к ```icon-2.svg```. Для этого в HTML нужно воспользоваться тегом ```use```:\n```pug\nsvg\n    use(xlink:href=\"img/sprites/sprite.svg#logo\")\n```\nИзменить стили svg-иконки из спрайта в CSS:\n```css\nsvg use {\n    fill: red;\n}\n```\nБывает такая ситуация, когда стили иконки поменять не получается. Это связано с тем, что при экспорте из Figma в svg добавляется лишний код. Например:\n```html\n\u003csvg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z\" fill=\"#1B1B1D\"/\u003e\n\u003c/svg\u003e\n```\nНужно удалить ```fill=\"none\"``` и ```fill=\"#1B1B1D\"```. Должно получиться так:\n```html\n\u003csvg width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z\"/\u003e\n\u003c/svg\u003e \n```\n\n### Сторонние библиотеки\n* все сторонние библиотеки устанавливаются в папку ```node_modules```\n    * для их загрузки воспользуйтеcь командой ```yarn add package_name```\n    * для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:\n    ```javascript\n    import $ from \"jquery\";\n    ```\n    * для подключения стилевых файлов библиотек импортируйте их в файл ```src/styles/vendor/_libs.scss```\n    * JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя\n\n## :point_right: Нужен SCSS без Pug?\nИспользуйте [эту](https://github.com/andrewalexeich/gulp-scss-starter/) сборку.\n\n## :yellow_heart: Нравится проект?\nСообщайте мне о [багах](https://github.com/andrewalexeich/gulp-pug-starter/issues), ставьте звёздочку, [задонатьте](https://t.me/andrewalexeich) мне Telegram TON на пиво :beer:\n\n## :envelope: Контакты\nПо всем вопросам пишите в [Telegram](https://t.me/andrewalexeich)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewalexeich%2Fgulp-pug-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewalexeich%2Fgulp-pug-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewalexeich%2Fgulp-pug-starter/lists"}