Front-end Boilerplate

gulp-webpack-handlebars is a flexible template for web development. It includes many tools for creating responsive, high-performance and lightweight pages.

:rocket: Gulp 4 + Webpack 5 + Handlebars + Babel + BrowserSync :fire:

Documentation

• Getting Started
  • Install
  • Use tasks
  • Use SVG sprite
• Features
• File structure

Getting Started

Install

1. Install NodeJS and npm
2. Clone this repository
3. Run npm install

git clone https://github.com/maksabuzyarov/gulp-webpack-handlebars.git
cd gulp-webpack-handlebars
npm install

Use tasks

	Task Name	Description	Environment
:construction:	npm run dev or gulp	Compile dev build, start the server and watch for changes	Development
:factory:	npm run build or gulp build --production	Compile production build	Production

How to use SVG sprite?

Add images

1. optional Change color values (fill or stroke) in your SVG file to currentColor to support dynamic color changes.
2. Put SVG file in src/img/svg-sprite directory.
3. The code from your SVG file will be included in one svg-sprite and placed in dist/img/svg-sprite/sprite.svg

SVG tag

<svg viewBox="x0 y0 x1 y1">
  <use href="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME"></use>
</svg>

You can get viewBox value from your SVG file or using devTools on the page after including sprite.svg

IMG tag

<img src="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME" alt="">

In this case, the image does not respond to color changes.

⬆ back to menu

Features

Type	List
Task Runner	Gulp
CSS	SASS / SCSS, CleanCSS, Autoprefixer
JS	Webpack, Babel
JS Examples	FileInclude, Uglify
HTML Templates	Handlebars.js, handlebars-layouts
Images	ImageMin
Live Reload	BrowserSync
Debug	Sourcemaps, Plumber
More	Favicons, SVG Sprites, Notifier, Changed
Included JS	Jquery, Bootstrap 4, CurrentDevice

⬆ back to menu

File structure

|-- dist
|-- tasks
|-- src
|   |-- fonts
|   |-- img
|   |   |-- favicon
|   |   |   |-- logo.png
|   |   |-- content (optional)
|   |   |-- main (optional)
|   |   |-- svg-sprite
|   |-- js
|   |   |-- components
|   |   |-- other
|   |   |-- app.js
|   |   |-- main.js
|   |-- styles
|   |   |-- components
|   |   |-- main.scss
|   |   |-- _app.scss
|   |   |-- _variables.scss
|   |-- views
|   |   |-- data
|   |   |-- helpers
|   |   |-- partials
|   |   |-- templates
|   |   |   |-- pages
|   |   |   |-- index.html
|-- .babelrc.js
|-- .browserslistrc
|-- .gitignore
|-- gulpfile.babel.js
|-- package.json
|-- webpack.config.js

• dist - folder with the finished results of assembly. In dev mode, is the root of the server.

• tasks - directory with gulp tasks.

• .babelrc.js - babel static configuration.

• gulpfile.babel.js - config and main tasks.

• src - source files

  • fonts - fonts files in directories named by font name. For example fonts/Ubuntu/Regular.{woff, woff2, ttf}

  • img - all images for optimization:

    • content - optional directory (Implied as: dynamic images for pages, may be removed after placing the layout on the CMS)
    • main - optional directory (Implied as: static template images (logo, background and etc.))

    • favicon - generating favicons from one image

    • svg-sprite - optimizes them and bakes them into SVG sprites

  • views

    • helpers - Handlebars.js helpers

    • partials - Handlebars.js templates

    • template - site pages

      • index.html - entry point

      • pages - all pages

⬆ back to menu

Copyright and license

Copyright 2019 Maksim Abuzyarov under the MIT license.