HTML Boilerplate with gulp support
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Gulp Boilerplate

I can build or start working on lot of landing pages. Across most of these sites, the requirements and types of functionality are often the same.

To save myself some time I created this boilerplate, which aims to achieve the following:

  • Quick set up of folder structure. This folder structure works nicely with both simple landing pages and even bigger Angular apps.
  • Concatinating and minifying javascript into one file.
  • SASS support (this will be minified to one file).
  • Express server so you don't need to worry about installing local servers like MAMP.
  • Consistent code formatting when commit to git (by using .editorconfig).
  • Git ignore so you don't commit node_modules.

Set up

Project Setup

  1. Open the project in your favourite editor and update lines 2, 4 and 5 in the package.json file.
  2. Make sure you have npm, node, gulp and sass installed on your machine.
  3. Run npm install.
  4. Run gulp

** Extra Benefits**

  1. Install the 'livereload' plugin for your browser: Chrome, Firefox.
  2. Turn 'livereload' on and start coding.


Below is useful snippets for Google Analytics tracking to help get you starter.

ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', value);  // value is a number.

Useful Plugins

Below have included some of my most commons plugins:

Modal Windows

For modal windows I tend to use the one. To install this, you need to run the following from your project route:

  1. gem install bourbon
  2. cd assets/styles/scss
  3. bourbon install
  4. You will need to @import bourbon/bourbon'; in your SCSS file.


This format might not cover everyones requirements. If you think something could be improved feel free to fork and submit a pull request.