Simple HTML Preprocessor

Question

Is there a simple HTML preprocessor available to use for existing HTML code, that I won't need to modify my existing html to conform with preprocessors syntax?

I'm developing a mobile app with a few pages built with html, however i've started having the problem of having to update each page for when making changes to similiar content (header, footer etc) I don't want to duplicate content and have mismatches, rather i'd like to use a preprocessor that has an include method (something like how php does it), so that I can include these similiar contents.

I've looked at stuff like HAML & Jade, but it seems they have a strict syntax you need to follow with indents and the sort or editing html to include pipes on each line, else things wont compile.

Like I said I have existing html I would just like to cut & paste my HTML into different files, include them and stick with that workflow as I think it's the simplest.

But if anyone has any other ideas how I can tackle my situation that is welcomed too.

Answer 1

I guess since your requirement is to only include files that you don't need a full blown template system . You could take a look at gulp-include which is a gulp plugin to include files. Using gulp has the advantage that gulp comes with a watch feature to watch the file system for changes - whenever a change is detected a task can be triggered.

An example how your gulpfile.js could look like

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

gulp.task('template', function() {
  return gulp
    .src('*.html')
    .pipe(include())
    .pipe(gulp.dest('dist'))
});

gulp.task('dev', function() {
  gulp.watch('*.html', ['template']);
});

gulp.task('default', ['template']);

This gulpfile registers a 'template' task that takes all html files and processes the file's contents with the gulp-include plugin. The template task is registed as default gulp task. So if you invoke gulp without any command line args then the template task is run. The gulp 'dev' task allows you to run gulp dev from the command line that watches all html files for changes and triggers the template task whenever a html file changes.

The gulp include plugin scans your html files for something like

= include relative/path/to/file.html

and includes 'file.html' contents.

The include syntax is quite well documented on the gulp-include web site.