{"id":23304318,"url":"https://github.com/starkelessar/gulp-2022","last_synced_at":"2025-10-26T00:18:45.782Z","repository":{"id":45714472,"uuid":"440816284","full_name":"StarkElessar/gulp-2022","owner":"StarkElessar","description":"Сборка Gulp+WebPack+ESBuild. 05.05.2024: добавил stylelint, отрефакторил стили, скрипты, добавил скрипт preview","archived":false,"fork":false,"pushed_at":"2025-01-07T09:08:29.000Z","size":2638,"stargazers_count":136,"open_issues_count":3,"forks_count":54,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T00:08:26.678Z","etag":null,"topics":["esbuild-loader","gulp","webpack"],"latest_commit_sha":null,"homepage":"https://starkelessar.github.io/gulp-2022/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StarkElessar.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":"2021-12-22T10:16:35.000Z","updated_at":"2025-02-04T10:32:33.000Z","dependencies_parsed_at":"2023-11-11T19:25:02.311Z","dependency_job_id":"d7a0f245-8037-4367-a110-e6895bc42129","html_url":"https://github.com/StarkElessar/gulp-2022","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarkElessar%2Fgulp-2022","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarkElessar%2Fgulp-2022/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarkElessar%2Fgulp-2022/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarkElessar%2Fgulp-2022/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StarkElessar","download_url":"https://codeload.github.com/StarkElessar/gulp-2022/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271528,"owners_count":20911587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["esbuild-loader","gulp","webpack"],"created_at":"2024-12-20T11:16:36.992Z","updated_at":"2025-10-26T00:18:40.752Z","avatar_url":"https://github.com/StarkElessar.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Start Template: Gulp + WebPack + ESBuild-Loader\n\nСборку делал по примеру автора [youtube](https://www.youtube.com/watch?v=jU88mLuLWlk) канала: [Фрилансер по жизни](https://www.youtube.com/c/FreelancerLifeStyle)\n\n## Для работы используйте такие команды\n\n- Для установки всех зависимостей: `npm install`;\n- Для запуска сборщика Gulp нужно использовать: `npm run dev`;\n- Для сборки проекта в режиме `\"production\"`: `npm run build`;\n- Для просмотра финального вариант в режиме `\"production\"`: `npm run preview`.\n\n## Что делает Gulp?\n\n- сжимает HTML в режиме `production`;\n- удаляет комментарии из HTML в режиме `production`;\n- собирает SCSS файлы, добавляет вендорные префиксы;\n- удаляет комментарии из SCSS файлов, сортирует и группирует медиа-запросы;\n- в режиме `production` сжимает CSS и делает копию без сжатия;\n- конвертирует шрифты в `.ttf`, и из `.ttf` в `woff/woff2`;\n- создает файл для подключения шрифтов. Данный файл создается по такому пути: `src/scss/config/fonts.scss`, выглядит это так:\n\n```scss\n@font-face {\n  font-family: Inter;\n  font-display: swap;\n  src: url('../fonts/Inter-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n}\n```\n\n### ВНИМАНИЕ!!!\n\n\u003e Если в папке `src/scss/config` - уже есть файл `fonts.scss` - тогда при добавлении новых шрифтов **НУЖНО УДАЛИТЬ** старый файл `fonts.scss`. Не переживай, при повторном запуске сборки - Gulp все новые шрифты сконвертирует и создаст новый файл `fonts.scss`.\n\nДальше, что еще умеет сборка:\n\n- сжимает изображения и конвертирует их дополнительно в формат `.webp` и подключает их если браузер поддерживает этот формат;\n- копирует папку `/static` с содержимым в финальную сборку. То есть любые файлы можно поместить в эту папку и она будет добавлена в финальную сборку без лишней обработки;\n- отдельной командой `npm run svgSprive` создает \"svg спрайты\";\n- перед каждым запуском сборщика чистит папку с финальным проектом, чтобы не собирать мусор;\n- отдельной командой `npm run zip` можно заархивировать финальную папку для заказчика **с именем проекта**;\n- так же для разработки `gulp` запускает сервер с автоматической перезагрузкой окна в браузере при изменении файлов в проекте;\n- отдельной командой `npm run deployFTP` финальный проект выгружается на хостинг. Опции для отправки проекта на нужный хостинг указываются в файле: `gulp/config/ftp.js`;\n- с 18.08.2023 есть поддержка шрифтов с такими названиями например: \"`Inter-Regular[ |-|_|__][I|i]talic`\" - такие названия Gulp правильно обработает и запишет в стили `font-style: normal/italic`;\n- Конвертация шрифтов происходит в папке `src/fonts` от туда шрифты с расширением `.woff2` переносятся в `dist/fonts`. Если файл для подключения шрифтов уже создан - gulp просто перенесет шрифты `*.woff2` в `dist/fonts` без лишней трудозатратной конвертации.\n\n## Что делает WebPack?\n\n- именно `webpack` в данной сборке занимается обработкой файлов c JavaScript;\n- поддерживается модульное подключение скриптов `import/export`;\n- позволяет создавать больше одного файла скриптов, чтобы подключать их на отдельные `html` страницы, для этого в корне папки `./src/js` создай нужный тебе файл;\n- при импорте нет необходимости писать расширение файла `.js`, так же если осуществляется импорт из файла `index.js` необязательно это указывать:\n\n```javascript\nimport * as helpers from './helpers' // './helpers/index.js'\n```\n\n- `webpack` c помощью `esbuild-loader` позволяет тебе писать код на любимом **ES6+**;\n- в режиме `\"production\"` при финальной сборке файлы JS сжимаются, а лишние комментарии удаляются.\n- с 11.2023 в сборке доступна сборка \"мульти-файлов\". То есть теперь на выходе можно иметь не один файл стилей `main.css`\nи один файл скриптов `main.js` - а столько, сколько тебе нужно. Для этого в папке `./src/js` в корне создай нужные файлы, а на выходе получишь их собранными.\nДля стилей в папке `./src/scss` создай папку `pages` и там создавай новые файлы стилей для новых страниц.\n\n## Финал\n\nОтдельной вишенкой является плагин `gh-pages` для деплоя папки `/dist` на отдельную ветку GitHub,\nчтобы красиво развернуть свой проект на GitHub Pages.\nДля этого в `package.json` укажи в поле **homepage** ссылку на свою страницу gh-pages:\n\n```json\n\"homepage\": \"https://{UserName}.github.io/{NameRepo}\",\n```\n\nС 05.05.2024 появилась возможность запустить финальный вариант для превью на свой компьютере,\nдля этого есть команда: `npm run preview`.\n\nПо любым вопросам касающихся сборки пишите мне в [Telegram](https://t.me/StarkElessar).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarkelessar%2Fgulp-2022","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarkelessar%2Fgulp-2022","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarkelessar%2Fgulp-2022/lists"}