Skip to content

maksabuzyarov/gulp-webpack-handlebars

Repository files navigation

Front-end Boilerplate

contributions welcome license version

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

🚀 Gulp 4 + Webpack 5 + Handlebars + Babel + BrowserSync 🔥

Documentation

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
🚧 npm run dev or gulp Compile dev build, start the server and watch for changes Development
🏭 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.