📌 RECOMMENDED TO USE WITH X-PROJECT COMPONENTS 📌
X-Project - is starter template with basic tasks for development, which uses Gulp to compile SASS to CSS (with SCSS syntax), add vendor prefixes, group media queries, remove comments and minimise CSS, bundle JavaScript modules using Webpack with ES6+ import/export syntax and Babel transpilation, optimising images (with creating of .WEBP versions and lazyloading), Browsersync for live-reload while development, favicon generator and project archiving. It includes the following libraries and frameworks (as a starting base):
- Bootstrap 5
- Swiper.js
- Choices.js
- Vanilla Lazyload
- Icomoon
src/ - "source" files to build and develop the project. This is where the original source files are located, before being compiled into fewer files to dist/. dist/ - the compiled code ("distribution").
Our project follow SASS guidelines.
JavaScript code is organized using ES6+ modules with import/export syntax, bundled with Webpack for optimal performance and tree-shaking. The build process includes Babel transpilation for browser compatibility and Terser minification for production builds.
Also all HTML/PUG & CSS/SCSS & JS code is linted and formated by Prettier, Stylelint, ESLint, EditorConfig. And by Git pre-commit hooks you cannot commit the changes if the code doesn't pass linting-review.
- You must have installed:
- Download or clone X-Project from Github
- Install Node Modules:
npm i
- Run the project:
gulp
- gulp - starting default gulp task (build, server, watch) for development
- gulp build - build project
- gulp removeDist - delete dist folder
- gulp img - image compression
- gulp favicon - favicon generator
- gulp zip - project archiving
- --prod - minification js, minification css, add vendor prefixes, group media queries, remove comments, image compression
- --pug - using pug preprocessor to generate html