{"id":14965777,"url":"https://github.com/maxuiux/gulpforge","last_synced_at":"2026-03-06T08:01:50.180Z","repository":{"id":255362876,"uuid":"845648943","full_name":"maxuiux/gulpforge","owner":"maxuiux","description":"Сборщик Gulp + Webpack для верстки проектов — от обычных лендингов до корпоративных сайтов. Поддерживает SCSS, include и импорт JS.","archived":false,"fork":false,"pushed_at":"2025-03-17T09:44:25.000Z","size":13602,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-02T17:37:29.146Z","etag":null,"topics":["css","development-environment","development-tools","development-workflow","es6","gulp","gulpforge","javascript","js","scss","starter","starter-project","web","web-development","web-kit","webpack","yarn"],"latest_commit_sha":null,"homepage":"https://maxuiux.github.io/gulpforge-preview/","language":"SCSS","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/maxuiux.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-21T16:50:26.000Z","updated_at":"2025-09-23T17:21:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"f33c5ebf-b35d-4e85-818e-71320559005c","html_url":"https://github.com/maxuiux/gulpforge","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":0.5,"last_synced_commit":"26d6cf2224fa55245b020b2e7aeb6841123815e1"},"previous_names":["maxuiux/gulpforge"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/maxuiux/gulpforge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxuiux%2Fgulpforge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxuiux%2Fgulpforge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxuiux%2Fgulpforge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxuiux%2Fgulpforge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxuiux","download_url":"https://codeload.github.com/maxuiux/gulpforge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxuiux%2Fgulpforge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30166859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T07:56:45.623Z","status":"ssl_error","status_checked_at":"2026-03-06T07:55:55.621Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","development-environment","development-tools","development-workflow","es6","gulp","gulpforge","javascript","js","scss","starter","starter-project","web","web-development","web-kit","webpack","yarn"],"created_at":"2024-09-24T13:35:17.268Z","updated_at":"2026-03-06T08:01:50.128Z","avatar_url":"https://github.com/maxuiux.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: gulpforge - Удобный сборщик WebPack + Gulp + \"FSD\"(Components) :white_check_mark: \n\n\u003e [!NOTE]\n\u003e Этот проект основан на [gulp-scss-starter](https://github.com/andrewalexeich/gulp-scss-starter), который является производной работой от [gulp-boiler](https://github.com/Lbdevaa/gulp-boiler), Оба проекта распространяются под лицензией GPL-3.0.\n\n## О сборке\n\n* Удобная структура \"FSD\"(Components)\n* Используется препроцессор [SCSS](https://sass-lang.com/)\n* Используется транспайлер [Babel](https://babeljs.io/) для поддержки современного JavaScript (ES6) в браузерах\n* Используется [Webpack](https://webpack.js.org/) для сборки JavaScript-модулей\n* Используется жёсткий кодгайд\n* Используется проверка кода на ошибки перед коммитом\n\n## Установка\n\n\u003cdetails\u003e\n  \u003csummary\u003eЕсли впервые устанавливайте :floppy_disk: \u003c/summary\u003e\n\n  Установить глобально: \n    \n  * [Yarn](https://yarnpkg.com/getting-started):\n    ```\n    npm i -g yarn\n    ```\n  * [Gulp](https://gulpjs.com/):\n    ```\n    npm i -g gulp\n    ```\n  * [Bem Tools](https://www.npmjs.com/package/bem-tools-core):\n    ```\n    npm i -g bem-tools-core\n    ```\n\n\u003c/details\u003e\n\n:one: **Установить версию yarn - создаст файл .yarn\\releases\\yarn-x.x.x.cjs и опишет в .yarnrc.yml**\n```\nyarn set version berry\n``` \n:two: **Скачать зависимости:**\n```\nyarn\n```\n:three: **Запустить сборку в режиме разработки:**\n```\nyarn run dev\n```\n## Команды\n\n**Запуск сервера для разработки проекта**\n```\nyarn run dev\n```\n**Собрать проект с оптимизацией без запуска сервера**\n```\nyarn run build\n```\n**Собрать HTML-файлы**\n```\nyarn run build:views\n```\n**Скомпилировать SCSS-файлы**\n```\nyarn run build:styles\n```\n**Собрать JS-файлы**\n```\nyarn run build:scripts\n```\n\n## Структура проекта\n\n```\ngulpforge                                   # Ваш проект\n├── dist                                    # Папка, из которой запускается локальный сервер для разработки -\n│                                               при запуске yarn run dev\n├── gulp-tasks                              # Папка с Gulp-тасками\n├── src                                     # Папка с исходными файлами для разработки проекта\n│   ├── fonts                               # Папка с файлами вашего шрифта\n│   ├── img                                 # Папка с изображениями (jpg,jpeg,png,gif,tiff,svg,ico,webp,avif)\n│        ├── sprites                        # Папка со всеми спрайтами (svg)\n│            ├── icon                       # Папка для спрайтов иконок (svg)\n│            ├── vector                     # Папка для спрайтов любых векторых изобжаний (svg)\n│   ├── js                                  # Папка со всеми JS-файлами и делением на папки FSD + Components\n│       ├── app                             # Папка с основными настройками проекта JS [опционально]\n│       ├── components                      # Папка с произвольными блоками JS [опционально]\n│       ├── entities                        # Папка с бизнес сущностями (пример: пользователь, пост, новости,\n│                                               товары, группы, друзья и т.д.) [опционально]\n│       ├── features                        # Папка действия пользователя (пример: лайкнуть, запостить,\n│                                               прокомментировать, подписаться и т.д.) [опционально]\n│       ├── libs                            # Работа с плагинами, подключение блоков, но не самих плагинов.\n│            ├── swiper                     # Папка с названием плагина\n│                ├── header-slider.js       # Слайдер для блока header-slider [пример]\n│                ├── benefits-slider.js     # Слайдер для блока benefits-slider [пример]\n│                └── items-slider.js        # Шаблон слайдера items-slider, может переиспользоваться [пример]\n│       ├── pages                           # Папка с настройками для конкретной страницы [опционально]\n│       ├── shared                          # Папка с переиспользоваными блоками [опционально]\n│       ├── widgets                         # Папка с cамодостаточными блоками (пример: пост, карточка товара, \n│                                               шапка профиля или сайта, toolbar и т.д.) [опционально]\n│       └── index.js                        # Главный JS-Файл со всеми нужными импортами из папки JS. \n│                                               Этот файл компилируется в dist/js/index.min.js \n│   ├── libs                                # На данном этапе, это обычное хранение JS и CSS файлов плагинов\n│                                               Прямое подключение в HTML.\n│       ├── swiper   \n│            ├── swiper-bundle.min.css    \n│            ├── swiper-bundle.min.js                     \n│   ├── styles                              # Папка со всеми SCSS стилями\n│       ├── app                             # Папка основными настройками проекта SCSS\n│            ├── grid                       # Папка с настройками сетки [опционально]\n│            ├── libs                       # Папка с прямыми файлами библиотек [опционально]\n│                 └── normalize.scss        # Файл со сбросом стилей\n│            ├── main                       # Папка с самыми главными настройками проекта\n│                 ├── fonts.scss            # Подключение шрифтов\n│                 ├── global.scss           # Ваши собственные глобальные стили (пример: section-padding, title, \n│                                               subtitle и т.д.)\n│                 ├── settings.scss         # Глобальные настройки проекта\n│                 └── variables.scss        # Хранение стилей в виде переменых SCSS $color: #fff; или нативные\n│                                               root: { --color: #fff; }\n│            ├── mixins                     # Папка с миксинами SCSS\n│                 ├── rem.scss              # Миксин который дает возможность использовать измерение rem,\n│                                               (пример: указываем в круглые скобочки цифры в пикселях - rem(24) \n│                                               или точное указание rem(24px))\n│                 └── responsive.scss       # Ваши настройки для адаптива\n│       ├── components                      # Папка с произвольными блоками SCSS [опционально]\n│       ├── entities                        # Папка с бизнес сущностями (пример: пользователь, пост, новости,\n│                                               товары, группы, друзья и т.д.) [опционально]\n│       ├── features                        # Папка действия пользователя (пример: лайкнуть, запостить,\n│                                               прокомментировать, подписаться и т.д.) [опционально]\n│       ├── libs                            # Папка где можно подифицировать стили плагинов SCSS, по аналогии с JS выше\n│       ├── pages                           # Папка со стилями страниц SCSS\n│       ├── shared                          # Папка с переиспользоваными блоками [опционально]\n│       ├── widgets                         # Папка с cамодостаточными блоками (пример: пост, карточка товара, \n│                                               шапка профиля или сайта, toolbar и т.д.) [опционально]\n│       └── index.scss                      # Главный SCSS-Файл со всеми нужными импортами из папки STYLE. \n│                                               Этот файл компилируется в dist/css/index.min.css \n│   ├── views                               # Папка со всеми HTML-файлами\n│       ├── app                             # Папка с основными файлами HTML\n│            ├── head.html                  # Настройки в шапке, подключения\n│            ├── scripts.html               # Подключение скриптов\n│       ├── components                      # Папка с произвольными блоками HTML [опционально]\n│       ├── entities                        # Папка с бизнес сущностями (пример: пользователь, пост, новости,\n│                                               товары, группы, друзья и т.д.) [опционально]\n│       ├── features                        # Папка действия пользователя (пример: лайкнуть, запостить,\n│                                               прокомментировать, подписаться и т.д.) [опционально]\n│       ├── pages                           # Папка со всеми страницами, кроме главной index.html\n│       ├── shared                          # Папка с переиспользоваными блоками [опционально]\n│       ├── widgets                         # Папка с cамодостаточными блоками (пример: пост, карточка товара, \n│                                               шапка профиля или сайта, toolbar и т.д.) [опционально]\n│       └── index.html                      # Главная страница HTML\n│   └── manifest.json                       # Файл manifest.json\n├── gulpfile.babel.js                       # Настройки Gulp\n├── webpack.config.js                       # Настройки Webpack\n├── package.json                            # Список зависимостей\n├── .yarnrc.yml                             # Настройка Yarn\n├── .babelrc.js                             # Настройки Babel\n├── .eslintrc.json                          # Настройки ESLint\n├── .stylelintrc                            # Настройки Stylelint\n├── .stylelintignore                        # Запрет на отслеживание файлов Stylelint'ом\n└── .gitignore                              # Запрет на отслеживание файлов Git'ом\n```\n* Файлы с импортами:\n    * ```index.js``` — от сюда компилируеться код в dist/js/index.min.js\n    * ```index.scss``` — от сюда компилируеться код в dist/js/index.min.css\n\n\n## Рекомендации по использованию\n### Удобная структура для разработки html, css, javascript\nЗа основу взят подход [\"FSD\"](https://feature-sliced.design/ru/), но с одним условием: использовать только названия папок, и всё. Дополнительно добавлена папка **components**, что очень удобно и важно. Здесь не нужно строго придерживаться данного подхода — суть только в удобстве. Если вам нужно удалить лишние папки, удаляйте их без зазрения совести; если нужно добавить — добавляйте; если нужно переименовать — переименовывайте. Можно создавать подпапки и многое другое. Важно только удобное деление, так как это не приложение React, Vue, Angular и другие, а профессиональная верстка — от небольших лендингов до корпоративных сайтов.\n#### Как можно использовать данную структуру?\n:coffee: Данный подход позволяет гибко изменять и модифицировать работу со сборкой, не теряя логику и смысл, упрощая процессы вместо их усложнения. Это не ограничивает творчество, особенно если вы верстаете по макетам дизайна из **Figma** или **Pixso**. Вам не нужно изобретать костыли или придумывать, как вписать дизайн в структуру, так как она не ставит ограничений, а наоборот, помогает расширять границы и легко масштабировать проект.\n\n* Работа с **HTML-блоками.** Блоки можно делать независимыми и переиспользуемыми, например, добавляя кнопку в **src/shared/buttons/button.html**, а её стили и скрипты — в соответствующие **SCSS** и **JavaScript файлы**. Если блок не подходит ни в одну из папок, например, из-за индивидуального дизайна, поместите его в папку components. Если блок часто используется и требует **множества модификаций**, создайте подкаталог внутри **src/views/components** с названием страницы из **src/views/pages**, чтобы контролировать блок конкретно для этой страницы. Это позволит переиспользовать блоки, добавляя дополнительные классы и стили в одном месте — например, для блока **.benefits** создайте **src/views/components/benefits.html**, а для блока с различными вариациями на разных страницах **(.latest-orders)** используйте структуру **src/views/components/index/latest-orders.html** и **src/views/components/portfolio/latest-orders.html.** Стили и скрипты можно хранить в одном файле, например, **src/styles/components/benefits.scss** и **src/js/components/benefits.js.**\n\n```\n├── src\n│   ├── js\n│       ...\n│       ├── components \n│           ├── latest-orders.js            # Опционально, не обязательно. Если необходимо.\n│           ├── benefits.js                 # Опционально, не обязательно. Если необходимо.\n│       ...\n│   ├── styles\n│       ...\n│       ├── components \n│           ├── latest-orders.scss          # Основные стили и модификации к ним.\n│           ├── benefits.scss               # Основные стили и модификации к ним.\n│       ...\n│   ├── views\n│       ...\n│       ├── components \n│           ├── index\n│               ├── latest-orders.html\n│           ├── portfolio\n│               ├── latest-orders.html\n│           └── benefits.html\n│       ...\n```\n* Работа с **JS** и **SCSS** гораздо проще и аналогична описанному выше подходу с HTML.\n* Не забывайте, что вы можете адаптировать эту структуру под свои нужды. Я показал лишь один из подходов, а ваши возможности ограничены только фантазией и потребностями.\n\n### Почему некоторые вещи нужно делать вручную?\n* Я делал сборку на основе тех, что описаны в начале. Почти всё в них автоматизировано, что очень удобно, но для меня как специалиста с большим опытом работы в верстке и со сборками в частности, стало очевидно, что плагины, используемые в Gulp, не всегда обеспечивают необходимое качество. Например, шрифты (fonts) искажаются при компиляции, изображения (img) в форматах WebP и AVIF сжимаются с потерей качества, тогда как [squoosh](https://squoosh.app/) справляется с этим лучше. Favicons также генерируются некачественно, как и изображения. Это основные примеры, но в остальном автоматизация значительно ускоряет работу, особенно с HTML, SCSS и JS файлами. Конечно, всегда есть к чему стремиться, и, возможно, когда-нибудь я создам идеальную сборку с качественной автоматизацией :grin:\n  \n### Страницы проекта\n* Страницы проекта находятся в папке ```src/views/pages```\n    * Главная страница: ```src/views/index.html```\n\n### Шрифты\n* Шрифты загружайть в папку ```src/fonts```\n    * Используйте любые удобные форматы\n    * Шрифты подключаются в файл в ручную ```src/styles/app/main/fonts.scss```\n    * Сконвертировать локальные шрифты можно с помощью [данного сервиса](https://onlinefontconverter.com/)\n\n### Изображения\n* Изображения загружайть в папку ```src/img```\n    * Поддерживаемые форматы **jpg,jpeg,png,gif,tiff,svg,ico,webp,avif**\n      \n### SVG-спрайты\n\nМожно поддерживать чистоту, заменяя значения атрибутов **fill** и **stroke** в загружаемых исходных файлах ```.svg``` на **currentColor**, чтобы управлять цветом через свойство color в **SCSS**. Также вы можете менять подходы и обращаться к **SVG** через **SCSS**.\n\nЕсть две папки для двух видов спрайтов:\n  - ```src/img/sprites/icon``` - Папка для спрайтов иконок (svg)\n  - ```src/img/sprites/vector``` - Папка для спрайтов любых векторых изобжаний (svg)\n  \n```\n│   ├── img                                 # Папка с изображениями (jpg,jpeg,png,gif,tiff,svg,ico,webp,avif)\n│        ├── sprites                        # Папка со всеми спрайтами (svg)\n│            ├── icon                       # Папка для спрайтов иконок (svg)\n│            ├── vector                     # Папка для спрайтов любых векторых изобжаний (svg)\n```\n* Добавление в HTML:\n```html\n\u003csvg\u003e\n    \u003cuse href=\"img/sprites/icon.svg#github\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n```html\n\u003csvg\u003e\n    \u003cuse href=\"img/sprites/vector.svg#illustration-nature\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\n* Вставка через тег img:\n```html\n\u003cimg src=\"img/sprites/vector.svg#illustration-nature\" alt=\"\"\u003e\n```\n\n### Сторонние библиотеки\n* На данном этапе подключение происходит стандартным образом: создайте папку с названием плагина в ```src/libs/swiper/``` и разместите внутри необходимые файлы **JS** и **CSS** плагина. Эти файлы и папки экспортируются напрямую в ```dist/libs``` и подключаются напрямую. В будущем я планирую сделать разделение на **vendor.scss** и **vendor.js**, чтобы подключать плагины импортами из **node_modules** и получать конечные файлы **vendor.min.css** и **vendor.min.js** со всеми нужными плагинами, что будет гораздо удобнее.\n\n## Версия yarn release на проект\n```4.3.1```\n\n## Для добавления своих пакетов\n```\nyarn add --dev\n``` \nили \n```\nyarn add -D\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxuiux%2Fgulpforge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxuiux%2Fgulpforge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxuiux%2Fgulpforge/lists"}