{"id":16412491,"url":"https://github.com/coliff/dz_step","last_synced_at":"2026-03-01T18:02:02.805Z","repository":{"id":148063587,"uuid":"547112839","full_name":"coliff/DZ_STEP","owner":"coliff","description":null,"archived":false,"fork":false,"pushed_at":"2022-10-07T06:43:18.000Z","size":771,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"gulp","last_synced_at":"2025-02-24T06:14:51.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coliff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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},"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"}},"created_at":"2022-10-07T06:42:26.000Z","updated_at":"2023-03-07T19:02:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"94e585e6-40c3-400a-9398-f79651fcd5b1","html_url":"https://github.com/coliff/DZ_STEP","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coliff/DZ_STEP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2FDZ_STEP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2FDZ_STEP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2FDZ_STEP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2FDZ_STEP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/DZ_STEP/tar.gz/refs/heads/gulp","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2FDZ_STEP/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29977966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T16:35:47.903Z","status":"ssl_error","status_checked_at":"2026-03-01T16:35:44.899Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":[],"created_at":"2024-10-11T06:49:07.170Z","updated_at":"2026-03-01T18:02:02.778Z","avatar_url":"https://github.com/coliff.png","language":null,"funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":[],"sub_categories":[],"readme":"# Gulp - збірка\n\n\u003e використовується Gulp 4\n\n## Початок роботи\n\nДля роботи зі збіркою у новому проекті, клонуйте весь вміст репозиторію \u003cbr\u003e\n`git clone \u003cthis repo\u003e`\nДалі запустіть в терміналі команду `npm i`, яка встановить всі залежності, що знаходяться в package.json.\nПісля цього ви можете використовувати будь-яку із запропонованих команд збірки (підсумкові файли потрапляють до папки **app** кореневої директорії): \u003cbr\u003e\n\n`gulp` - базова команда, яка запускає складання для розробки, використовуючи browser-sync\n\n`gulp build` - команда для продакшн-складання проекту. Усі ассети стиснуті та оптимізовані для викладення на хостинг.\n\n`gulp cache` - команда, яку варто запускати після `gulp build`, якщо вам потрібно завантажити нові файли на хостинг без кешування.\n\n`gulp backend` - команда для бекенд-складання проекту. Вона позбавлена ​​непотрібних речей з dev-складання, але не стиснута, для зручності бекендера.\n\n`gulp zip` – команда збирає ваш готовий код у zip-архів.\n\n## Структура тек і файлів\n\n```\n├── src/                          # Вихідні файли\n│   ├── js                        # Скрипти\n│   │   └── main.js               # Головний скрипт\n│   │   ├── _vars.js              # файл зі змінними проекту\n│   │   ├── _vendor.js            # файл із підключеннями бібліотек\n│   │   ├── _functions.js         # файл із готовими функціями на js\n│   │   ├── _components.js        # файл із підключеннями компонентів\n│   │   ├── components            # js-компоненти\n│   │   ├── vendor                # папка для загрузки локальных версий библиотек\n│   ├── scss                      # Стилі сайту (препроцесор sass у scss-синтаксисі)\n│   │   └── main.scss             # Головний файл стилів\n│   │   └── vendor.scss           # Файл для підключення стилів бібліотек з папки vendor\n│   │   └── _fonts.scss           # Файл для підключення шрифтів (можна використовувати міксин)\n│   │   └── _mixins.scss          # Файл для підключення міксинів із папки mixins\n│   │   └── _vars.scss            # Файл для написання css- або scss-змінних\n│   │   └── _settings.scss        # Файл для написання глобальних стилів\n│   │   ├── components            # scss-компоненти\n│   │   ├── mixins                # папка для збереження готових scss-компонентів\n│   │   ├── vendor                # папка для зберігання локальних css-стилів бібліотек\n│   ├── partials                  # папка для зберігання html-частин сторінки\n│   ├── img                       # папка для зберігання картинок\n│   │   ├── svg                   # спеціальна папка для перетворення svg в спрайт\n│   ├── resources                 # папка для зберігання інших ассетів - php, відеофайли, favicon і т.д.\n│   │   ├── fonts                 # папка для зберігання шрифтів у форматі woff2\n│   └── index.html                # Головний html-файл\n└── gulpfile.js                   # файл с налаштуваннями Gulp\n└── package.json                  # файл с налаштуваннями збірки та встановленими пакетами\n└── .editorconfig                 # файл с налаштуваннями форматування коду\n└── .ecrc                         # файл с налаштуваннями пакету editorconfig-checker (виключає непотрібні папки)\n└── .stylelintrc                  # файл с налаштуваннями stylelint\n└── README.md                     # документація збірки\n```\n\n## npm-скрипти\n\nВи можете викликати gulp-скрипти через npm.\nТакож у збірці є можливість перевіряти код на відповідність конфігу (editorconfig) та валідувати html.\n\n`npm run html` - запускає валідатор html, запускати потрібно за наявності html-файлів у теці **app**.\n\n`npm run code` - запускає editorconfig-checker для перевірки відповідності конфіг-файлу.\n\n## Робота з html\n\nЗавдяки плагіну **gulp-file-include** можна розділяти html-файл на різні шаблони, які повинні зберігатися в теці **partials**. Зручно поділяти html-сторінку на секції.\n\n\u003e Для вставки html-частин у головний файл використовуйте `@include('partials/filename.html')`\n\nЯкщо ви хочете створити багатосторінковий сайт – копіюйте **index.html**, перейменовуйте як вам потрібно, та використовуйте.\n\nПри використанні команди `gulp build` ви отримаєте мінімізований html-код в один рядок для всіх html-файлів.\n\n## Робота з CSS\n\nУ складання використовується препроцесор **sass** у синтаксисі **scss**.\n\nСтилі, написані в **components**, слід підключати до **main.scss**.\n**ВАЖЛИВО:** Обов'язково видалити стилі, які написані в **main.scss** для `.page__body`.\n\nЩоб підключити сторонні css-файли (бібліотеки) - покладіть їх у теку **vendor** та підключіть у файлі **\\_vendor.scss**\n\nЯкщо ви хочете створити свій міксин - робіть це в теці **mixins**, а потім підключайте файл **\\_mixins.scss**.\n\nЯкщо ви хочете використовувати scss-змінні - підключіть **\\_vars.scss** також до main.scss або в будь-яке інше місце, де він потрібен, але обов'язково видаліть **:root**.\n\n\u003e Для підключення файлів css використовуйте директиву `@import`\n\nУ підсумковій теці **app/css** створюються два файли: \u003cbr\u003e **main.css** - для стилів сторінки, \u003cbr\u003e **vendor.css** - для стилів усіх бібліотек, що використовуються в проекті.\n\nПри використанні команди `gulp build` ви отримаєте мінімізований css-код в один рядок для всіх css-файлів.\n\n## Робота з JavaScript\n\nДля складання JS-коду використовується webpack.\n\nJS-код краще ділити на компоненти - невеликі js-файли, які містять свою ізольовану один від одного реалізацію. Такі файли розміщуйте в теці **components**, а потім імпортуйте у файл **\\_components.js**\n\nУ файлі **vars.js** повинні зберігатися базові змінні проекту, на зразок знаходження елементів і т.д.\n\nУ файлі **main.js** нічого міняти не потрібно, він зроблений просто як результуючий.\n\nПідключати сторонні бібліотеки можна через npm для цього існує файл **\\_vendor.js**. Імпортуйте туди підключення.\n\nЯкщо якоїсь бібліотеки немає в npm або просто потрібно підключити щось локальним файлом - кладіть його в теку **vendor** і так само імпортуйте, але вже з шляхом до файлу.\n\nПри використанні команди `gulp build` ви отримаєте мінімізований js-код в один рядок для всіх js-файлів.\n\n## Робота зі шрифтами\n\nМи не підтримуємо IE11, у збірці реалізована підтримка лише формату **woff2** (це означає, що у міксині підключення шрифтів використовується лише даний формат).\n\nЗавантажуйте файли **woff2** у теку **resources/fonts**, а потім викликайте міксин `@font-face` у файлі **\\_fonts.scss**.\n\nТакож не забудьте прописати ці ж шрифти в \u003clink preload\u003e в html.\n\n## Робота із зображеннями\n\nБудь-які зображення, крім **favicon**, кладіть у теку **img**.\n\nЯкщо потрібно зробити svg-спрайт, кладіть потрібні для спрайту svg-файли в теку **img/svg**. При цьому такі атрибути як fill, stroke, style будуть автоматично видалятися. Інші svg-файли просто залишайте у теці **img**.\n\nПри використанні команди `gulp build` ви отримаєте мінімізовані зображення в підсумковій теці **img**.\n\nУ збірці доступна підтримка **webp** та **avif** форматів. Підключити їх можна через тег `picture`. Для background можна використовувати звичайні **jpg** або **png**, або використовувати image-set там, де це можливо.\n\n## Робота з іншими ресурсами\n\nБудь-які ресурси (ассети) проекту, під які не відведена відповідна тека, повинні зберігатися у теці **resources**. Це можуть бути відеофайли, php-файли (як, наприклад, файл відправки форми), favicon та інші.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fdz_step","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fdz_step","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fdz_step/lists"}