Gulp Demo - Static Website Template

This project demonstrates a complete static website template built with Gulp. The project has since been adapted to Gulp 5, but is not expected to be maintained further. There are now more modern and presumably more suitable options available. I will demonstrate one such option using Vite here.

The website code itself is not meant to make sense, but only serves the purpose of demonstrating the build. Nevertheless, I would like to thank my daughter for choosing the image and theme :)

List of all tasks used

• Deleting the distribution folder on new build.
• Compile scss to css, compress the code, rename the build file
• Compress and concatenate js files.
• Copy all html and fonts files to the distribution folder.
• Image optimization for jpgs, gifs and pngs.
• Icon optimization for svgs.
• Generate svg icons to a sprite file.
• Copy all generated files to the distribution folder.
• After a new build, automatically open or reload the index.html in the browser.
• Monitor the source folder to run tasks when changes occur.

Run build

gulp

Project Structure

demo_gulp/
├── src/                          # Source files
│   ├── index.html               # Main HTML file
│   ├── scss/                    # SCSS source files
│   │   ├── main.scss           # Main SCSS entry point
│   │   ├── abstracts/          # Variables, mixins, functions
│   │   ├── base/               # Base styles, typography
│   │   └── custom/             # Component styles
│   ├── js/                     # JavaScript source files
│   │   ├── accordion.js        # Accordion functionality
│   │   ├── title.js           # Title animations
│   │   └── year.js            # Year display
│   ├── images/                 # Image assets
│   │   └── *.jpg              # Responsive header images
│   ├── icons/                  # SVG icons
│   │   ├── *.svg              # Individual icons
│   │   └── iconset/           # Icons for sprite generation
│   └── fonts/                  # Web fonts
│       └── *.woff2            # Fira Sans font files
├── dist/                       # Built/compiled files (generated)
│   ├── css/                   # Compiled CSS
│   ├── js/                    # Minified JavaScript
│   ├── images/                # Optimized images
│   ├── icons/                 # Optimized icons and sprite
│   └── fonts/                 # Copied fonts
├── .temp/                      # Temporary build files (generated)
├── gulpfile.mjs               # Gulp configuration
├── package.json               # Dependencies and scripts
└── README.md                  # This file