Compiling html (headers and footers)

Question

I'm about to start a small project involving creating a micro site. Typically I build my sites using a CMS system with a PHP backed such as WordPress however as the development for this site needs to be fast (and its only a few pages) we have opted to go with a static HTML site with some content generated by php (possible included via AJAX) for the time being.

Now to my question, is there anyway to compile either before commit (using gulp/grunt or what have you) or on the server end? Id like the site to take in separated headers and footers from various other files to help remove redundant code and ease maintenance. Some sort of small template engine would do the trick. Can anyone point me in the correct direction?

Answer 1

PHP is a template engine (amongst other things). There's no need for an external package.

An example:

<?php include 'path/to/header.html.php' ?>

<body>
  <!-- put your page-specific contents here -->
</body>

<?php include 'path/to/footer.html.php' ?>

Update:

There's no standard way of doing client-side includes at the moment, although the idea was conceived a long time ago: http://en.wikipedia.org/wiki/Transclusion

The closest thing in pure HTML are <iframe> elements.

Using gulp, I'd go with something like gulp-concat:

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('build-prototype', function() {
  return gulp.src(['./src/header.html', './src/content.html', './src/footer.html'])
    .pipe(concat('prototype.html'))
    .pipe(gulp.dest('./dist/'));
});