I often like to start new sites with a mock up that is strictly html. I get html templates from sites like Theme Forest so they are already designed for me. All I do is modify it to fit the theme of my new site.

The biggest pain is that most of these html files have the header and footer in them so looking at the files one at a time look great but when I want to start my modifications, I'm looking for a way to make a change in the header or footer section once and then see it in all of my new pages.

Here's what I'm doing to get this done today, it's simple, easy to implement and trimmed down to just the basics to get going. I really love gulp and doing html mockups in real-time is a dream come true.

Here's the steps to get you going:

1. create a folder where you want your html files to go, in the command line type "mkdir YourFolderNameHere"
2. type "npm init" in that folder to create the package.json file
3. then type "npm install gulp –save-dev"
4. then type "npm install gulp -g"
5. then type "npm install"
6. create a folder named "partials" , this is where you will put your files like "header.html", "footer.html" & "indexBody.html" etc.
7. you can use my package.json (see below)
8. create a new file named "gulpfile.js" and you can use my code (see below) vin the root folder, you can add your /assets, /js, /css for your theme etc. folders
9. add your header.html, footer.html & indexBody.html into the /partials folder
10. type "gulp" at the command line and you will have a new index.html file in the root folder and you when you make changes to any file in the /partials folder, it will rebuild the file and reload the browser

Here's what's in my package.json file:

{
  "name": "your project name here",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "gulp": "latest",
    "gulp-concat": "latest",
    "browser-sync": "latest"
  }
}

Here's what's in my gulpfile.js

"use strict";

var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();

gulp.task("concatIndex", function () {
    gulp.src(['partials/header.html', 'partials/indexBody.html', 'partials/footer.html'])
        .pipe(concat("index.html"))
        .pipe(gulp.dest("./"))
});

gulp.task("build", ['concatIndex'], function () {
    browserSync.reload();
});

gulp.task('default', ['build'], function () {
    browserSync.init({
        open: false,
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('partials/*.html', ['build']);
});