Welcome to HTML-Boilerplate.

A HTML5 Boilerplate generator to create a site with help of gulp.js to automate building task. If you don't know what is gulp.js and how it works, read my blog post: Automation using Grunt and Gulp.

Get Started, Install Dependency Packages through terminal:

If you dont have node, then go to http://nodejs.org/

$ npm install -g yo
$ npm install -g gulp

Install generator now:

$ npm install -g generator-html-boilerplate

First create a folder and cd into:

$ mkdir <folder-name> && cd $_

Create a new application with:

$ yo html-boilerplate <app-name> (or) yo html-boilerplate

Everything is set, npm will automatically install, if not:

$ npm install

Save the pain of copy pasting library files like jQuery, Bootstrap etc

Gulp will take care of including it in the build without stopping the local server. Just type below command in terminal.

$ bower install --save <library-name>

Finally, type:

$ gulp

Get list of tasks

$ gulp help

If your code is ready to production to

Uglify and minify HTML, CSS and JS files, use below command.

$ gulp prod

Folder Structure:

Copy all your existing files to app folder (or) create your own files in folder structure like below

  app/          (Development)
   -js/         (JS files)
   -js/lib/     (JS library files)
   -css/        (Both SASS and CSS files & import SCSS files to app.scss)
   -css/lib/    (CSS Frameworks)
   -images/     (images)
   -fonts/      (fonts goes here)
   -templates/  (template and layout files goes here)
   -index.html

All the files in above structure will automatically copied to build/ directory as

  build/        (Production)
   -js/         (all.js, all JS files + bower.js, all bower files)
   -css/        (styles.css, SCSS converted CSS files & CSS files + bower.css files)
   -images/     (images files)
   -fonts/      (fonts)
   -templates/  (template HTML files)
   -index.html

Authors and Contributors

Author @gokulkrishh. If you think this generator can be improved, create an issue and give me a pull request.

Support or Contact

Having trouble with this generator?. Contact me krishnangokul9@gmail.com and I will contact you as soon as possible.