Frontend gulp boilerplate

   

Features

• 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

Requirements

• node: >=14
• yarn or npm

Installation

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

Development

Assets Source

• 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

Build/Compile Assets

Start a development server

Yarn

yarn dev

NPM

npm run dev

One time build assets

Yarn

yarn build

NPM

npm run build

Compile and watch assets

Yarn

yarn watch

NPM

npm run watch

Production

Build Assets

Yarn

yarn production

NPM

npm run production

Built Assets Source

• 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