Gulp boilerplate

• Getting started
  • Download
  • Setup
• Usage
  • Hot reloading
  • Svg sprite
  • Favicon
  • Fonts
  • HTML validation
  • Templating
  • Dependencies
  • Rebuilding project files
• Configuration
• License

Getting started

Download

Clone github repository:

$ git clone https://github.com/ewape/gulp-boilerplate.git

Setup

Use following commands inside main directory to build local version of a project:

$ npm i
$ gulp build

Usage

Hot reloading

Watching changes in files is handled by Browsersync.

$ gulp watch

Svg sprite

$ gulp svg-sprite

Default configuration generates svg «symbol» mode sprite template based on .svg files from ./src/images/icons directory along with usage example in ./docs.
Svg-sprite documentation: https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md
Online configuration kickstarter for gulp: http://jkphl.github.io/svg-sprite/#gulp

Favicon

$ gulp favicon

Favicon files are generated with gulp-real-favicon.
Options are defined in gulpfile.babel.js under faviconConfig variable. This setup uses faviconDataFile.json to generate HTML markup in ./src/html/templates/partials/favicon.njk file.
Input image supported formats: .png, .jpg, .svg.

Fonts

$ gulp fonts

Downloads Google webfonts and updates @font-face declarations in ./src/scss/modules/_fonts.scss.

HTML validation

$ gulp w3c

Templating

This project uses Mozilla's Nunjucks templating.

Dependencies

Libraries included

• jQuery
• normalize-scss

Lazy loading images

• lazysizes

Scroll detection

• scrollMonitor detect element position in viewport

Forms

• Parsley.js - form validation
• autosize - textarea auto grow

Installing dependencies via npm

$ npm i <devDependency-name> -D
$ npm i <dependency-name> -S

Rebuilding project files

After updating sprites, favicons, fonts and dependencies rebuild project:

$ gulp clean
$ gulp build

Configuration

font.list

This file is used by gulp-google-webfonts to download .woff files from Google Fonts and update @font-face declarations in ./src/scss/modules/_fonts.scss.
Supported formats:

  # Tab-delimeted format
  Oswald  400,700 latin,latin-ext

  # Google format
  Roboto:300,400,700&subset=latin-ext
  Lato:300,400,700&subset=latin-ext

License

MIT License