To work with this build, clone the entire contents of the repository using:
git clone <this repo>
After cloning, navigate to the main project folder and run the following command to install all necessary dependencies specified in the package.json file:
npm iOnce 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:
gulpThe base command that starts the build process for development.
gulp buildBuilds the project, optimizing and compressing all files for hosting.
gulp cacheRun this command after gulp build if you need to upload new files to the hosting without using caching.
gulp backendBuilds the backend part of the project. This build contains only the necessary elements and is not compressed, making it convenient for backend development.
gulp zipPacks your finished code into a zip archive.
npm run deployCreates 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.
By following these steps, you'll be set up to work with the project efficiently.
βββ π.vscode/
βββπextensions.json # Recommended extensions
βββ πgulp/ # All Gulp build settings, divided into separate files
βββ πsrc/ # Sources
β βββπjs/ # Scripts
β β βββπ components/ # js components
β β βββπ functions.js/ # File with ready-to-use js functions
β β βββπ _components.js # component connection file
β β βββπ main.js # Main script
β βββ πstyles/ # Main styles folder
β β βββπblocks/ # folder scss components
β β βββπ components-name.scss # scss component
β β βββπhelpers/ # folder scss components
β β βββπ _functions.scss # contains utility functions used throughout the project.
β β βββπ _index.scss # imports all the other files in this folder, serving as an entry point.
β β βββπ _media.scss # includes media queries for responsive design.
β β βββπ _mixins.scss # stores project-specific mixins for reusable styles.
β β βββπ _fonts.scss # File for connecting fonts
β β βββπ _globals.scss # Π‘ontains reusable global classes for consistent styling across the project.
β β βββπ _normalize.scss # File with global tag reset
β β βββπ _utils.scss # Π‘ontains utility classes and helper styles for quick and reusable styling.
β β βββπ _variables.scss # Global variables
β β βββπ main.scss # Imports all style blocks, serving as the central stylesheet for the project.
β β βββπ vendor.scss # File for connecting library styles from the vendor folder
β βββπ blocks/ # folder for storing html partials of the page
β β βββπcomponents-name.html # particle html component
β βββ πpages/ # folder for storing html pages of the project
β β βββπpage-name.html # html pages
β βββ πimg/ # folder for storing img
β β βββπsvg/ # special folder for converting svg to sprite
β βββ πassets/ # folder for storing other assets - php, video files, favicon, etc.
β β βββπ video/ # folder for video files
β β βββπ fonts/ # folder for storing fonts in woff2 format
β β βββπ fonts.woff2 # fonts only woff2
β β βββπ favicon.ico # favicon
βββ π gulpfile.js # Gulp configuration file
βββ π package.json # file with build settings and installed packages
βββ π .editorconfig # file with code formatting settings
βββ π .ecrc # editorconfig-checker package settings file (excludes unnecessary folders)
βββ π .prettierrc # Prettier settings file
βββ π README.md # README build
Using gulp-file-include, you can divide an HTML file into various templates, which should be stored in the components folder.
Note
To insert HTML parts into the main file, use @include('../components/filename.html')
When you run the gulp build command, all HTML files will be minified into a single line of code.
The SASS preprocessor using SCSS syntax is employed during the build process.
Styles written within components should be included in the main.scss file.
To incorporate third-party CSS files (libraries), place them in the vendor folder and reference them in the _vendor.scss file.
In the final folder app/css, two files are generated:
- main.css - for page styles,
- vendor.css - for the styles of all libraries used in the project.
Webpack is used to build the JS code.
JavaScript 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.
The main.js file is the primary file where all the others are included.
The build supports only the woff2 format.
Place the woff2 files in the assets/fonts folder, and then call the @font-face mixin in the _fonts.scss file.
Also, don't forget to include the same fonts in <link preload> in the HTML.
Place any images other than the favicon in the img folder.
If 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.
If you use the gulp build command, you will get minified images in the final *img folder.
Any project assets that do not have a corresponding folder should be stored in the resources folder. These can include video files, favicon, and others.
A 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.
The main index.html file contains a brief excerpt and descriptions of each meta tag.
Thank 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!