{"id":14965815,"url":"https://github.com/andrewalexeich/gulp-scss-starter","last_synced_at":"2025-04-04T08:04:57.874Z","repository":{"id":33066318,"uuid":"146933533","full_name":"andrewalexeich/gulp-scss-starter","owner":"andrewalexeich","description":"Frontend development with pleasure. SCSS version","archived":false,"fork":false,"pushed_at":"2023-06-10T11:04:23.000Z","size":8535,"stargazers_count":560,"open_issues_count":1,"forks_count":193,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-03-28T07:02:38.869Z","etag":null,"topics":["babel","bem","css","development-environment","development-tools","development-workflow","es6","gulp","html","javascript","js","sass","scss","starter","starter-kit","starter-project","web","web-development","webpack","yarn"],"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}},"created_at":"2018-08-31T19:16:27.000Z","updated_at":"2025-03-27T18:26:02.000Z","dependencies_parsed_at":"2023-07-19T18:34:30.497Z","dependency_job_id":null,"html_url":"https://github.com/andrewalexeich/gulp-scss-starter","commit_stats":null,"previous_names":["andrewalexeich/gulp-scss-starter","andreyalexeich/gulppack-scss","andreyalexeich/gulp-scss-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-scss-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-scss-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-scss-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalexeich%2Fgulp-scss-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewalexeich","download_url":"https://codeload.github.com/andrewalexeich/gulp-scss-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247137352,"owners_count":20889858,"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":["babel","bem","css","development-environment","development-tools","development-workflow","es6","gulp","html","javascript","js","sass","scss","starter","starter-kit","starter-project","web","web-development","webpack","yarn"],"created_at":"2024-09-24T13:35:22.344Z","updated_at":"2025-04-04T08:04:57.851Z","avatar_url":"https://github.com/andrewalexeich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-scss-starter\n\n![License](https://img.shields.io/github/license/andreyalexeich/gulp-scss-starter)\n![GitHub stars](https://img.shields.io/github/stars/andreyalexeich/gulp-scss-starter.svg?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/andreyalexeich/gulp-scss-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* используется препроцессор [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-scss-starter.git```\n* перейдите в скачанную папку со сборкой: ```cd gulp-scss-starter```\n* введите ```yarn set version berry```\n* скачайте необходимые зависимости: ```yarn```\n* чтобы начать работу, введите команду: ```yarn run dev``` (режим разработки)\n* чтобы собрать проект, введите команду ```yarn run build``` (режим сборки)\n\nЕсли вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.\n\n## :open_file_folder: Файловая структура\n\n```\ngulp-scss-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    * HTML-файлы: ```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=stylelint.vscode-stylelint). Для WebStorm\nили PHPStorm необходимо включить Stylelint в ```Languages \u0026 Frameworks - Style Sheets - Stylelint```\n* ```yarn run dev``` - запуск сервера для разработки проекта\n* ```yarn run build``` - собрать проект с оптимизацией без запуска сервера\n* ```yarn run build:views``` - собрать HTML-файлы\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 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* папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)\n    * HTML-файл блока импортируется в файл ```src/views/index.html``` (или в необходимый файл страницы, откуда будет вызываться блок)\n    * SCSS-файл блока импортируется в файл ```src/blocks/modules/_modules.scss```\n    * JS-файл блока импортируется в ```src/js/import/modules.js```\n\nПример структуры папки с БЭМ-блоком:\n```\nblocks\n├── modules\n│   ├──header\n│   │   ├── header.html\n│   │   ├── header.js\n│   │   ├── header.scss\n```\n\nЧтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующую команду: ```yarn run bem-m my-block``` - для создания БЭМ-блока в ```src/block/modules```, где ```my-block``` - имя БЭМ-блока (после создания нужно удалить содержимое js-файла БЭМ-блока).\n\n### Страницы проекта\n* страницы проекта находятся в папке ```src/views/pages```\n    * главная страница: ```src/views/index.html```\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 нужно воспользоваться тегом ```\u003cuse\u003e```:\n```html\n\u003csvg\u003e\n    \u003cuse xlink:href=\"img/sprites/sprite.svg#logo\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\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``` (например, ```yarn add jquery```)\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-pug-starter/) сборку.\n\n## :yellow_heart: Нравится проект?\nСообщайте мне о [багах](https://github.com/andrewalexeich/gulp-scss-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-scss-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewalexeich%2Fgulp-scss-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewalexeich%2Fgulp-scss-starter/lists"}