gulp-starter
requires the following dependencies:
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 install
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:
npm run dev
The base command that starts the build process for development.
npm run build
Builds the project, optimizing and compressing all files for hosting.
npm run cache
Run this command after gulp build if you need to upload new files to the hosting without using caching.
npm run 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.
npm run 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
โ โ โโโ main.js # Main script
โ โ โโโ _components.js # component connection file
โ โ โโโ components # js components
โ โ โโโ _functions.js # File with ready-to-use js functions
โ โโโ styles # Main styles folder
โ โ โโโ main.scss # Main style file
โ โ โโโ vendor.scss # File for connecting library styles from the vendor folder
โ โ โโโ _fonts.scss # File for connecting fonts (you can use myxin)
โ โ โโโ _mixins.scss # File for connecting mixins from the mixins folder
โ โ โโโ _vars.scss # File for writing css or scss variables
โ โ โโโ _base-variables.scss # File with global variables
โ โ โโโ _colors-variables.scss # File with color variables
โ โ โโโ _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
โ โ โโโ components # scss components
โ โ โโโ mixins # folder for saving finished mixins components
โ โ โโโ vendor # folder for storing local css styles of libraries
โ โโโ components # folder for storing html partials of the page
โ โโโ pages # folder for storing html pages of the project
โ โโโ 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
โ โโโ index.html # Main html file
โโโ 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.
In build, the sass preprocessor in scss syntax is used.
Styles written in components should be plugged into main.scss.
To connect third-party css files (libraries) - put them in the vendor folder and connect them in the _vendor.scss file.
In the final folder app/css two files are created:
- main.css - for page styles,
- vendor.css - for 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