Advantages

Stylus

Stylus is the most progressive preprocessor for CSS. Fast, flexible, no extra syntax. You will find ready mixins.
You can learn more about the language here.

See the Pen Stylus by Ulyanov Ivan (@ulyanov-programmer) on CodePen.

Scripts (Typescript)

Like JS, only better. Prevents errors at the compilation stage, hints work fine in VS Code. Moreover, you will find many useful scripts in the assembly.
You can get acquainted with the built-in scripts in this gulp here.
Try playing with TypeScript here.

Images

As usual - your PNG, JPG and others will be optimized, translated into webp... And avif. Yes, it's time to use it.

<img src="img/img.png" alt='yourImg'>

→


								<picture>
 <source srcset="img/img.avif" 
  type="image/avif">
 <source srcset="img/img.webp" 
  type="image/webp">
 <img src="img/img.png" 
  alt='yourImg'>
</picture>

This also works with background images.

Autoincluding the Swiper slider

The assembly automatically connects the Swiper slider to the project, its styles and scripts, if necessary.
This can be disabled when cleaning the build.

Fast connection of fonts

To the point that you don't have to do anything at all! Seriously, even adaptive fonts are connected automatically.

Just put a file in the folder

↓


@font-face {
  ↓ Based on the file name
  font-family: 'fontName';
  font-display: swap;
  ↓ You do not need to specify the path to the font
  src: url("../fonts/fontName.woff2") format("woff2");
  ↓ It detects automatically
  font-weight: 900; 
  ↓ It's to
  font-style: italic;

  If the font is adaptive, it will be 
  connected in the same way, but with many different font weights.
}

And of course - the required content.

Of course, you will find here such common things as: fileInclude, autoprefixer, optimization / cleaning styles and scripts (terser) and font converter (ttf2woff2). And something else that I forgot or considered not very necessary.
If you are interested in the packages used, look here.

Structure

It's useful to know this, isn't it?


📦#src
┣ 📂docs
┃ ┣ ...
┣ 📂fonts
┃ ┗  yourFonts.ttf/otf/woff/woff2
┣ 📂img
┃ ┗  yourImages.jpg/png/svg/gif/ico/webp/avif
┣ 📂scripts
┃ ┣ 📂modules
┃ ┃ ┗  yourModules.ts/js
┃ ┣  generalScript.ts/js
┃ ┗  sliders.js/js
┣ 📂styles
┃ ┣ 📂modules
┃ ┃ ┣  _nullStyle.styl
┃ ┃ ┗  yourStyleModules.styl
┃ ┣ 📂other
┃ ┃ ┣  _fonts.styl
┃ ┃ ┣  _general.styl
┃ ┃ ┣  _mixins.styl
┃ ┃ ┗  _vars.styl
┃ ┣  style.styl
┃ ┣  _footer.styl
┃ ┗  _header.styl
┣ 📂components
┃ ┣  _header.htm
┃ ┣  _footer.htm
┃ ┣  _headContent.htm
┃ ┗  _modals.htm
┣  index.html
┗  otherPages.html

📦Result
 ┣ 📂css
 ┃ ┣ style.css
 ┃ ┣ style.min.css
 ┃ ┗ swiper-styles.css //optional
 ┣ 📂docs //optional
 ┃ ┗ ...
 ┣ 📂fonts
 ┃ ┗  yourFonts.woff2
 ┣ 📂img
 ┃ ┗  yourImages.jpg/png/svg/webp/avif
 ┣ 📂scripts
 ┃ ┣ 📂modules
 ┃ ┃ ┣  module.js
 ┃ ┃ ┗  module.js
 ┃ ┣  moduleAPI.js
 ┃ ┣  swiper-scripts.js //optional
 ┃ ┗  yourScripts.js
 ┃  index.html
 ┗  otherPages.html