/gulp-hbs-boilerplate

A Handlebars and Gulp 4 boilerplate

Primary LanguageJavaScriptMIT LicenseMIT

Gulp 4 / Handlebars boilerplate Build Status

A boilerplate for building projects using Gulp 4 and Handlebars.

Features

  • Build HTML files using Handlebars templates.
  • Select which JavaScript files to concatenate and include them in a single file.
  • Minify JavaScript files.
  • Linting with JSHint.
  • Uses 7-1 Sass architecture folder structure. 7-1 Guidelines
  • Compile, minify, autoprefix and lint Sass/SCSS.
  • Strip out any unused styles from CSS files.
  • Identify scripts and styles with project details.
  • Creates sourcemaps for both minified scripts and styles.
  • Reduce JPG file sizes and make a WebP copy.
  • Optimise SVGs.
  • Watch for file changes and automatically recompile.
  • Reload webpages.

Getting started

Make sure have the following installed:

Node.js
Gulp Command Line Utility npm install -g gulp-cli

Quick Start

  • In your terminal change to your project directory.
  • To install the project use npm install for all files and dependencies.
  • When complete, run one of the following tasks:
    • gulp manually compiles files.
    • gulp watch automatically compiles files and applies changes using BrowserSync.

After compiling a new folder called dist will appear, this folder will house all your compiled files.

Note: Gulp only uses devDependencies.

Using Includes for JavaScript

Files listed with require will only be included if it has not been included before.

  • //=require vendor/jquery.js (Specific file in the vendor folder)
  • //=require vendor/**/*.js (Any and all folders/files in the vendor folder)

Files list with include will always be included.

  • //=include relative/path/to/file.js