{"id":46348447,"url":"https://github.com/vaban-ru/gulp-template","last_synced_at":"2026-03-04T22:04:02.814Z","repository":{"id":134070091,"uuid":"207627351","full_name":"vaban-ru/gulp-template","owner":"vaban-ru","description":"Шаблон для верстки. Используется SCSS, PostHTML и автоматическая генерация SVG спрайтов","archived":false,"fork":false,"pushed_at":"2023-09-26T11:16:23.000Z","size":415,"stargazers_count":34,"open_issues_count":1,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-09-26T13:45:02.157Z","etag":null,"topics":["babel","css","gulp","html","js","postcss","posthtml","scss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"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/vaban-ru.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}},"created_at":"2019-09-10T17:55:38.000Z","updated_at":"2023-09-26T11:10:41.000Z","dependencies_parsed_at":"2023-09-26T14:11:50.553Z","dependency_job_id":null,"html_url":"https://github.com/vaban-ru/gulp-template","commit_stats":null,"previous_names":[],"tags_count":15,"template":null,"template_full_name":null,"purl":"pkg:github/vaban-ru/gulp-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaban-ru%2Fgulp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaban-ru%2Fgulp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaban-ru%2Fgulp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaban-ru%2Fgulp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaban-ru","download_url":"https://codeload.github.com/vaban-ru/gulp-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaban-ru%2Fgulp-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30095696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T21:59:23.547Z","status":"ssl_error","status_checked_at":"2026-03-04T21:57:50.415Z","response_time":59,"last_error":"SSL_read: 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":["babel","css","gulp","html","js","postcss","posthtml","scss"],"created_at":"2026-03-04T22:04:02.198Z","updated_at":"2026-03-04T22:04:02.803Z","avatar_url":"https://github.com/vaban-ru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Сборка для верстки\n![alt text](https://badgen.net/github/release/webzlodimir/gulp-template \"Releases\")\n\n## Подготовка к работе\n\n1. `git clone git@github.com:webzlodimir/gulp-template.git`\n2. `cd gulp-template`\n3. `yarn install`\n4. `yarn start`\n\n## Структура проекта\n\n```\ngulp-template\n├── src\n│   ├── css\n│   ├── fonts\n│   ├── img\n│   ├── svg\n│   ├── js\n│   ├── sass\n│   ├── public\n│   ├── templates\n│   └── pages\n├── package.json\n├── README.md\n├── gulpfile.js\n├── .babelrc\n├── .browserslistrc\n├── .prettierrc\n├── .prettierignore\n└── .gitignore\n```\n\n* Корень проекта:\n    * ```.babelrc``` — настройки Babel\n    * ```.prettierrc``` — настройки Prettier\n    * ```.prettierignore``` — запрет изменения файлов Prettier\n    * ```.gitignore``` – запрет на отслеживание файлов Git'ом\n    * ```package.json``` — список зависимостей\n    * ```README.md``` — описание проекта\n    * ```gulpfile.js``` — файл конфигурации Gulp\n    * ```.browserslistrc``` — файл конфигурации поддерживаемых версий браузеров\n    \n* Папка ```src``` - используется во время разработки:\n    * ```css``` — директория для файлов css библиотек, изначально тут лежит файл сброса стилей\n    * ```fonts``` – директория для шрифтов\n    * ```img``` — директория для изображений\n    * ```svg``` — папка для SVG файлов, для последующей генерации SVG спрайта которые автоматически сгенерируется в папке img\n    * ```js``` — директория для js библиотек. Здесь  лежит:\n        - `app.js` для кастомного кода;\n        - `ofi.min.js` - полифил для CSS-свойства `object-fit`;\n        - `lazysizes.min.js` - [библиотека для lazy-load изображений](https://github.com/aFarkas/lazysizes);\n        - `imask.min.js` - [библиотека маски](https://imask.js.org/guide.html).\n    * ```sass``` — директория для sass файлов\n    * ```public``` — директория для пользовательских файлов, все файлы из неё будут скопированы в корень собранного проекта\n    * ```templates``` — директория для html файлов которые добавляются в проекте\n    * ```pages``` — директория для html страниц\n\n## Миксины и прочее\nИзначально есть пара полезных вещей:\n - В сборке установлена автоматическая генерация SVG спрайта, для этого необходимо добавить файлы в папку src/svg, после чего в папке dist/img сгенерируется спрайт с именем sprite.svg. В нём каждый SVG файл будет иметь айдишник равный названию самого файла.\n - `@include font-face(\"FuturaPT\", \"/fonts/FuturaPT-Book\", 300);` - позволяет подключать шрифты в 1 строку.\n - `@include object-fit(cover)` - используется для полифила CSS-свойства object-fit\n - На тег `html` автоматически вешается класс `is-mac` или `is-ios` для определения устройства\n \n ## Верстка\nКоманды для сборки:\n - `yarn start` запускает сборку и локальный сервер с Hot Reloading\n - `yarn build` запускает сборку и на выходе получаем собранные, но не минифицированные  файлы app.js и app.css для последующей передачи программистам\n \n## PostHTML\n\nДля расстановки правильных переносов используется плагин [PostHTML Richtypo](https://github.com/Grawl/posthtml-richtypo). Для блока в котором вы хотите отформатировать текст необходимо указать атрибут `data-typo`:\n```\n\u003cp data-typo\u003eТут текст\u003c/p\u003e\n```\n\nДля шаблонизации в проекте используется [Gulp PostHTML](https://github.com/posthtml/gulp-posthtml) с плагинами [PostHTML Include](https://github.com/posthtml/posthtml-include) и [PostHTML Expressions](https://github.com/posthtml/posthtml-expressions)\n\n### Добавление файлов\nЧто бы просто вставить один файл в другой используется конструкция `\u003cinclude\u003e`, пример кода:\n```\n\u003cinclude src=\"src/templates/header.html\"\u003e\u003c/include\u003e\n```\n\n### Компоненты\nДля того что бы извне передать в вставляемый файл какие либо данные необходимо использовать директиву `locals`, и передать туда данные в виде JSON объекта, пример кода:\n```\n\u003cinclude src=\"src/templates/head.html\" locals='{\"title\": \"Главная страница\"}'\u003e\u003c/include\u003e\n```\n\n### Условия\nВнутри любого файла можно использовать разные условия, пример кода:\n```\n\u003cif condition=\"foo === 'bar'\"\u003e\n  \u003cp\u003eFoo really is bar! Revolutionary!\u003c/p\u003e\n\u003c/if\u003e\n\n\u003celseif condition=\"foo === 'wow'\"\u003e\n  \u003cp\u003eFoo is wow, oh man.\u003c/p\u003e\n\u003c/elseif\u003e\n\n\u003celse\u003e\n  \u003cp\u003eFoo is probably just foo in the end.\u003c/p\u003e\n\u003c/else\u003e\n```\n\nТак же можно использовать конструкцию `switch/case`, пример кода:\n```\n\u003cswitch expression=\"foo\"\u003e\n  \u003ccase n=\"'bar'\"\u003e\n    \u003cp\u003eFoo really is bar! Revolutionary!\u003c/p\u003e\n  \u003c/case\u003e\n  \u003ccase n=\"'wow'\"\u003e\n    \u003cp\u003eFoo is wow, oh man.\u003c/p\u003e\n  \u003c/case\u003e\n  \u003cdefault\u003e\n    \u003cp\u003eFoo is probably just foo in the end.\u003c/p\u003e\n  \u003c/default\u003e\n\u003c/switch\u003e\n```\n\n### Циклы\nВ любом файле так же можно перебирать данные (массивы или объекты) с помощью цикла, пример кода:\n#### Массив\n```\n\u003ceach loop=\"item, index in array\"\u003e\n  \u003cp\u003e{{ index }}: {{ item }}\u003c/p\u003e\n\u003c/each\u003e\n```\n\n#### Объект\n```\n\u003ceach loop=\"value, key in anObject\"\u003e\n  \u003cp\u003e{{ key }}: {{ value }}\u003c/p\u003e\n\u003c/each\u003e\n```\n\nТак же не обязательно передавать данные через переменную, их просто можно написать в цикл, пример кода:\n```\n\u003ceach loop=\"item in [1,2,3]\"\u003e\n  \u003cp\u003e{{ item }}\u003c/p\u003e\n\u003c/each\u003e\n```\n\nВ цикле вы можете использовать уже готовые переменные для выборки определенных элементов:\n* `loop.index` - текущий индекс элемента, начинается с 0\n* `loop.remaining` - количество оставшихся до конца итераций\n* `loop.first` - булевый указатель, что элемент первый\n* `loop.last` - булевый указатель, что элемент последний\n* `loop.length` - количество элементов\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaban-ru%2Fgulp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaban-ru%2Fgulp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaban-ru%2Fgulp-template/lists"}