Web Wizards Agency

Fictional web development agency WebWizards built by group of passionate developers.

Contributors ✨

Thanks goes to these people:

Jovana Marčeta 💬 🌏

Aidas Kairys 💬 🌏

Guenez Muhamed 💬 🌏

Deepak Gudi 💬 🌏

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 4 + Handlebars + Babel + BrowserSync 🔥

Documentation

• Getting Started

  • Install
  • Use tasks
  • Use SVG sprite

• Features

• File structure

Getting Started

Install

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

Use tasks

	Task Name	Description	Environment
🚧	gulp	Compile dev build, start the server and watch for changes	Development
🏭	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.