Gulp 2022
Сборка Gulp+WebPack+ESBuild. 17.04.2025: для исправления ошибок при сборке, добавил базовые папки icons, styles/pages. Добавил для спрайта-svg - иконок
Overview:
This document provides an overview of the Start Template which combines Gulp, WebPack, and ESBuild-Loader for web development. The setup follows the example from the YouTube channel "Freelancer Life." The template includes commands for installing dependencies, running the development server, building the project for production, and previewing the final output.
Features:
-
Gulp Features:
- Minifies HTML in production mode
- Removes comments from HTML in production mode
- Compiles SCSS files, adds vendor prefixes, and optimizes media queries
- Minifies CSS in production mode
- Converts fonts to various formats and creates a font inclusion file
- Optimizes and converts images to webp format
-
Additional Gulp Features:
- Copies the static folder contents to the final build without extra processing
- Generates SVG sprites with a specific command
- Cleans the final project directory before each build
- Archives the final build for the client
- Starts a development server with automatic browser reload
- Uploads the final project to a hosting server via FTP
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
