{"id":15021456,"url":"https://github.com/vitaliylf/gulp-starter","last_synced_at":"2025-10-08T23:08:02.027Z","repository":{"id":225867920,"uuid":"766973584","full_name":"VitaliyLF/gulp-starter","owner":"VitaliyLF","description":"Gulp V5  Starter for a quick development start. Automated build simplifies development, letting focus on quality code.","archived":false,"fork":false,"pushed_at":"2025-07-20T11:10:02.000Z","size":2039,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-20T13:05:27.717Z","etag":null,"topics":["browsersync","gulp","gulp-plugin","gulp-sass","gulp-starter","gulp-starter-kit","gulp5","scss","seo","seo-optimization","starter","svg-sprites","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/VitaliyLF.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":"SECURITY.md","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-03-04T13:30:28.000Z","updated_at":"2025-07-20T11:10:05.000Z","dependencies_parsed_at":"2024-06-08T20:25:18.821Z","dependency_job_id":"b9cd40cf-70b7-4b22-8148-ebbc87f5c9b8","html_url":"https://github.com/VitaliyLF/gulp-starter","commit_stats":{"total_commits":58,"total_committers":2,"mean_commits":29.0,"dds":0.4137931034482759,"last_synced_commit":"b0cc3e8ff773411b3d7167f3fde2b0d76cd0238a"},"previous_names":["vitaliylf/gulp-starter"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/VitaliyLF/gulp-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitaliyLF%2Fgulp-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitaliyLF%2Fgulp-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitaliyLF%2Fgulp-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitaliyLF%2Fgulp-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VitaliyLF","download_url":"https://codeload.github.com/VitaliyLF/gulp-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitaliyLF%2Fgulp-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000730,"owners_count":26082862,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["browsersync","gulp","gulp-plugin","gulp-sass","gulp-starter","gulp-starter-kit","gulp5","scss","seo","seo-optimization","starter","svg-sprites","webpack"],"created_at":"2024-09-24T19:56:35.915Z","updated_at":"2025-10-08T23:08:02.022Z","avatar_url":"https://github.com/VitaliyLF.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cp\u003e\u003cimg src=\"https://tpverstak.ru/wp-content/uploads/2018/09/7fb34ea5d33344da61d80-2.jpg\" alt=\"Gulp Logo\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## 📦 Getting started \u003ca href=\"https://github.com/VitaliyLF/gulp-starter/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/VitaliyLF/gulp-starter\" alt=\"Stars Badge\"/\u003e\u003c/a\u003e\n\nTo work with this build, clone the entire contents of the repository using:\u003cbr\u003e\n\n`git clone \u003cthis repo\u003e`\n\nAfter cloning, navigate to the main project folder and run the following command to install all necessary dependencies specified in the package.json file:\u003cbr\u003e\n\n```shell\nnpm i\n```\n\nOnce the dependencies are installed, you can use any of the available build commands. The resulting files will be placed in the `app` folder in the root directory:\n\n```shell\n gulp\n```\n\nThe base command that starts the build process for development.\n\n```shell\n gulp build\n```\n\nBuilds the project, optimizing and compressing all files for hosting.\n\n```shell\n gulp cache\n```\n\nRun this command after gulp build if you need to upload new files to the hosting without using caching.\n\n```shell\n gulp backend\n```\n\nBuilds the backend part of the project. This build contains only the necessary elements and is not compressed, making it convenient for backend development.\n\n```shell\n gulp zip\n```\n\nPacks your finished code into a zip archive.\n\n```shell\n npm run deploy\n```\n\nCreates a temporary clone of the current repository, generates a gh-pages branch if it doesn't already exist, copies all files from the base path (or those matching patterns from the optional src configuration), commits all changes, and pushes to the origin remote.\n\n`By following these steps, you'll be set up to work with the project efficiently.`\n\n## 📁 Folder and file structure\n\n```\n├── 📁.vscode/\n    ├──📃extensions.json                        # Recommended extensions\n├── 📁gulp/                                     # All Gulp build settings, divided into separate files\n    ├── 📁config/                               # Configuration files\n    └── 📁tasks/                                # Task files for gulp\n├── 📁src/                                      # Sources\n│   ├── 📁assets/                               # folder for storing other assets\n│   │   └──📁 fonts/                            # folder for storing fonts in woff2 format\n│   │   └──📁 video/                            # folder for video files\n│   │   ├──📃 favicon.ico                       # favicon\n│   ├── 📁components/                           # Components folder\n│   │   ├── 📁head/                             # Head components\n│   │   ├── 📁layout/                           # Layout components (header, footer)\n│   │   ├── 📁blocks/                           # Blocks components\n│   ├──📁js/                                    # Scripts\n│   │   └──📁 components/                       # js components\n│   │   ├──📁 functions/                        # File with ready-to-use js functions\n│   │   ├──📃 _components.js                    # component connection file\n│   │   └──📃 main.js                           # Main script\n│   ├── 📁styles/                               # Main styles folder\n│   │   └──📁components/                        # Style components\n│   │   │   ├── 📁layout/                       # Layout styles\n│   │   │   ├── 📁section/                      # Section styles\n│   │   │   └── 📁blocks/                       # Blocks component styles\n│   │   └──📁helpers/                           # Helper styles\n│   │   ├──📃 _fonts.scss                       # File for connecting fonts\n│   │   ├──📃 _globals.scss                     # Global styles\n│   │   ├──📃 _normalize.scss                   # File with global tag reset\n│   │   ├──📃 _utils.scss                       # Utility styles\n│   │   ├──📃 _variables.scss                   # Global variables\n│   │   ├──📃 main.scss                         # Main stylesheet\n│   │   └──📃 vendor.scss                       # Vendor styles\n│   ├── 📁img/                                  # Images folder\n│   │   └──📁svg/                               # SVG files for sprite\n│   └── 📁pages/                                # HTML pages\n├── 📁app/                                      # Development build directory\n├── 📁build/                                    # Production build directory\n└── 📃 gulpfile.js                              # Gulp configuration file\n└── 📃 package.json                             # Project dependencies and scripts\n└── 📃 .editorconfig                            # Editor configuration\n└── 📃 .ecrc                                    # Editorconfig-checker settings\n└── 📃 .prettierrc                              # Prettier settings\n└── 📃 SECURITY.md                              # Security guidelines\n└── 📃 LICENSE                                  # License information\n└── 📃 README.md                                # Project documentation\n```\n\n## 🔖 Working with HTML\n\nUsing **gulp-file-include**, you can divide an HTML file into various templates, which should be stored in the **components** folder.\n\n---\n\n\u003e [!NOTE] \u003e **To insert HTML parts into the main file, use `@include('../components/filename.html')`**\n\n---\n\nWhen you run the `gulp build` command, all HTML files will be minified into a single line of code.\n\n## 💎 Working with CSS\n\nThe **SASS** preprocessor using **SCSS** syntax is employed during the build process.\n\nStyles written within **components** should be included in the **main.scss** file.\n\nTo incorporate third-party CSS files (libraries), place them in the **vendor** folder and reference them in the **\\_vendor.scss** file.\n\nIn the final folder **app/css**, two files are generated:\n\n- **main.css** - for page styles,\n- **vendor.css** - for the styles of all libraries used in the project.\n\n## 📝 Working with JavaScript\n\nWebpack is used to build the JS code.\n\nJavaScript code is better organized when divided into components — small JS files that contain their own isolated implementations. Place these files in the **components** folder, and then import them into the **\\_components.js** file.\n\nThe **main.js** file is the primary file where all the others are included.\n\n## ✒️ Working with fonts\n\nThe build supports only the **woff2** format.\n\nPlace the **woff2** files in the **assets/fonts** folder, and then call the @font-face mixin in the **\\_fonts.scss** file.\n\nAlso, don't forget to include the same fonts in `\u003clink preload\u003e` in the HTML.\n\n## 🎨 Working with images\n\nPlace any images other than the **favicon** in the **img** folder.\n\nIf you need to create an SVG sprite, put the SVG files needed for the sprite in the **img/svg** folder. Attributes like fill, stroke, and style will be automatically removed. For other SVG files, just leave them in the **img** folder.\n\nIf you use the `gulp build` command, you will get minified images in the final \\*_img_ folder.\n\n## 📜 Working with other assets\n\nAny project assets that do not have a corresponding folder should be stored in the **resources** folder. These can include video files, favicon, and others.\n\n## ⌨️ Typographer\n\nA typographer plugin has been connected to ensure the correct display of text on the page. This plugin will **automatically** add non-breaking spaces and other characters, ensuring the text is displayed according to all language rules.\n\n## ✅ Seo optimization\n\nThe main **index.html** file contains a brief excerpt and descriptions of each meta tag.\n\n## ⭐ Thank you\n\nThank you for using this build. If you find it helpful, please give it a **star** on GitHub and follow the repository for updates. Your support is greatly appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitaliylf%2Fgulp-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitaliylf%2Fgulp-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitaliylf%2Fgulp-starter/lists"}