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 i
Once 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:
gulp
The base command that starts the build process for development.
gulp build
Builds the project, optimizing and compressing all files for hosting.
gulp cache
Run this command after gulp build if you need to upload new files to the hosting without using caching.
gulp backend
Builds the backend part of the project. This build contains only the necessary elements and is not compressed, making it convenient for backend development.
gulp zip
Packs your finished code into a zip archive.
npm run deploy
Creates 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.
βββ π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
β β βββπcomponents/ # scss components
β β βββπmixins/ # folder for saving finished mixins components
β β βββπvendor/ # folder for storing local css styles of libraries
β β βββπ _base-variables.scss # File with global variables
β β βββπ _colors-variables.scss # File with color variables
β β βββπ _fonts.scss # File for connecting fonts (you can use myxin)
β β βββπ _mixins.scss # File for connecting mixins from the mixins folder
β β βββπ _offset-system-variables.scss # File with offset system variables
β β βββπ _reset.scss # File with global tag reset
β β βββπ _settings.scss # File for writing global styles
β β βββπ _unitary-classes.scss # File with unitary classes that are reused throughout the project
β β βββπ main.scss # Main style file
β β βββπ vendor.scss # File for connecting library styles from the vendor folder
β βββπ components/ # 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.
β β βββπ 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.
JS code is better divided into components - small js-files that contain their own, isolated from each other implementation. Place such files in the components folder, and then import them into the _components.js file
The main.js file is the main file where all the others are connected.
The build implements support for woff2 format only
Load the woff2 files into the assets/fonts folder, and then call the @font-face
mixin in the _fonts.scss file.
Also, don't forget to put the same fonts in <link preload>
in the html.
Put any images other than favicon in the img folder.
If you need to make an svg sprite, put the svg files needed for the sprite in the img/svg folder. At the same time, attributes like fill, stroke, style will be automatically removed. 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 be video files, php files (such as form submission file), favicon and others.
For the correct display of text on the page was connected plugin typographer, which will automatically add unbroken spaces and other characters, so that the text everywhere displayed according to all the rules of the language.
The main index.html lists a brief excerpt and descriptions of each meta tag