• Uses Locomotive Scroll for detection of elements in viewport & smooth scrolling with parallax effects.
• Uses Barba to create fluid and smooth transitions between your website's pages.
• Uses Vanilla lazyload to speed up your web application by deferring the loading of your below-the-fold images.
• CSS architecture containing generic and base style, custom configuration, grid, utilities, mixins etc.
• Dynamic javascript modules rendering (example.js file as a reference).
• Configuration per environment
  • development - sourcemaps, browser synced developmentment server
  • production - css minification, js minification
• The built CSS / JavaScript files will respect the configured supported browser versions using the following tools:
  • autoprefixer - automatically adds vendor prefixes to CSS rules.
  • esbuild - It tells esbuild to transform JavaScript syntax that is too new for these environments into older JavaScript syntax that will work.
• Support for assets optimization for production environment with ability to configure:
  • Code Minification of JavaScript and CSS processed files.
  • Optimize Assets Loading - images / fonts.
• Latest Gulp 4 - Front-end task runner.
• Latest SASS/gulp-sass compiler based on Dart sass.
• gulp-esbuild JavaScript bundler.
• Configured and ready to use Browsersync Server plugin for faster local development - browser-sync

• node: >=14
• yarn or npm

Yarn

git clone git@github.com:gcolombi/frontend-gulp-boilerplate.git project-name
cd project-name
yarn install

NPM

git clone git@github.com:gcolombi/frontend-gulp-boilerplate.git project-name
cd project-name
npm install

Replace the original remote repository with your project's repository.

Update the following files to suit your project:

• README.md
• package.json:
  • name: frontend-gulp-boilerplate
  • description: Starter project template boilerplate ...
  • author: Gérard Colombi
• site.webmanifest
  • name: Frontend gulp boilerplate
  • short_name: Boilerplate

• SASS/SCSS: src/assets/styles/
• JavaScript: src/assets/scripts/
• Images: src/assets/images/
• Fonts: src/assets/fonts/
• HTML: src/templates/

📦src
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┣ 📂svg
 ┃ ┃ ┗ 📜example.jpg
 ┃ ┣ 📂scripts
 ┃ ┃ ┣ 📂base
 ┃ ┃ ┣ 📂modules
 ┃ ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜app.js
 ┃ ┃ ┣ 📜lifecycle.js
 ┃ ┃ ┗ 📜store.js
 ┃ ┗ 📂styles
 ┗📂templates
   ┣ 📜container.html
   ┣ 📜form.html
   ┣ 📜grid.html
   ┣ 📜images.html
   ┣ 📜index.html
   ┗ 📜spacing.html

Yarn

yarn dev

NPM

npm run dev

Yarn

yarn build

NPM

npm run build

Yarn

yarn watch

NPM

npm run watch

Yarn

yarn production

NPM

npm run production

• CSS: dist/assets/
• JavaScript: dist/assets/
• Images: dist/assets/images/
• Fonts: dist/assets/fonts/
• HTML: dist/

📦dist
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┣ 📂svg
 ┃ ┃ ┣ 📂webp
 ┃ ┃ ┗ 📜example.jpg
 ┃ ┣ 📜app.js
 ┃ ┣ 📜app.js.map
 ┃ ┣ 📜example.css
 ┃ ┣ 📜example.css.map
 ┃ ┣ 📜example.js
 ┃ ┣ 📜example.js.map
 ┃ ┣ 📜forminput.js
 ┃ ┣ 📜forminput.js.map
 ┃ ┣ 📜style.css
 ┃ ┗ 📜style.css.map
 ┣ 📜container.html
 ┣ 📜form.html
 ┣ 📜grid.html
 ┣ 📜images.html
 ┣ 📜index.html
 ┗ 📜spacing.html