Simple HTML preprocessor
Is there a simple HTML preprocessor that can be used on existing HTML that I won't need to modify the existing html to match the preprocessor syntax?
I am developing a mobile application with multiple pages generated with html, however I am having a problem of having to refresh every page when I make changes to similar content (header, footer, etc.). I don't want for duplicate content and inconsistencies, rather, I would like to use a preprocessor that has an include method (something like how php does it) so I can include those similar stuff.
I've looked at things like HAML and Jade, but it seems that they have a strict syntax that you need to follow with indentation, and sorting or editing the html to include lines on each line, otherwise things won't compile.
As I said, I have html, I would just like to cut and paste my HTML in different files, include them and stick to this workflow as I think this is the simplest.
But if anyone has any other ideas how can I solve my situation, which is also welcome.
source to share
I guess since your only requirement is to include files for which you don't need a full blown templating system. You can take a look at gulp-include , which is a gulp plugin for including files. Usage gulp
has the advantage that gulp comes with a viewer to view the filesystem for changes - whenever a change is detected, the task can be run.
An example of how yours gulpfile.js
might 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 one gulpfile
registers a "template" task that takes all html files and processes the file contents using the gulp-include plugin. The template task is registered as a default gulp job. So if you call gulp without any command line arguments, then the template task is run. The gulp 'dev' task allows you to run gulp dev
from the command line that monitors all html files for changes and runs the template task whenever the html file changes.
gulp include plugin scans your html files for something like
= include relative/path/to/file.html
and includes the content of 'file.html'.
The include syntax is well documented on the gulp-include website.
source to share