Frontend Gulp Boilerplate

Overview:

This product is a frontend gulp boilerplate, a starter project template that provides a pre-configured setup for building frontend applications. It is based on the use of Gulp, a popular task runner, and includes several key features for efficient web development. The boilerplate utilizes technologies such as Locomotive Scroll, Barba, and Vanilla lazyload to enhance the scrolling, page transitions, and image loading aspects of a website. It also incorporates CSS architecture, dynamic JavaScript modules rendering, and code optimization for different environments.

Features:

• Uses Locomotive Scroll: Detects elements in the viewport and enables smooth scrolling with parallax effects.
• Uses Barba: Creates fluid and smooth transitions between website pages.
• Uses Vanilla lazyload: Speeds up web application loading by deferring the loading of below-the-fold images.
• CSS architecture: Includes generic and base styles, custom configuration, grid, utilities, and mixins.
• Dynamic JavaScript modules rendering: Provides a reference example.js file for rendering dynamic JavaScript modules.
• Configuration per environment: Offers different configurations for development and production environments, such as sourcemaps, minification of CSS and JavaScript files, and assets optimization.
• Support for assets optimization: Allows code minification of JavaScript and CSS processed files, as well as optimizing assets loading, such as images and fonts.
• Latest Gulp 4: Utilizes the latest version of Gulp, a popular frontend task runner.
• Latest SASS/gulp-sass compiler: Based on Dart Sass, the compiler used for processing SASS files.
• gulp-esbuild JavaScript bundler: Bundles JavaScript files using the gulp-esbuild plugin.
• Configured Browsersync Server plugin: Provides a plugin for faster local development using Browsersync.