简单的HTML预处理器

Question

是否有一个简单的HTML预处理器可用于现有HTML代码，而我不需要修改现有html以符合预处理器语法？

我正在开发一个移动应用程序，其中有几个用html构建的页面，但是我开始遇到这样的问题：在更改类似内容（页眉，页脚等）时，我不想更新每个页面，我不想复制内容并具有不匹配项，而是我想使用具有include方法（类似于php的功能）的预处理器，以便可以包含这些相似的内容。

我看过诸如HAML和Jade之类的东西，但是似乎它们具有严格的语法，您需要遵循缩进以及对HTML进行排序或编辑以在每行中包含管道，否则将无法编译。

就像我说的那样，我已经有html了，我想将HTML剪切并粘贴到不同的文件中，包括它们并坚持该工作流程，因为我认为这是最简单的。

但是，如果有人有其他想法，我也可以解决我的情况，这也受到欢迎。

Answer 1

我猜想，因为您的要求是只包含不需要完整模板系统的文件。您可以看一下gulp-include，这是一个包含文件的gulp插件。使用gulp具有gulp附带的监视功能来监视文件系统中的更改的优点-每当检测到更改时，就可以触发任务。

一个例子，你gulpfile.js可能看起来像

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']);

这将gulpfile注册一个“模板”任务，该任务将获取所有html文件并使用gulp-include插件处理文件的内容。模板任务已注册为默认gulp任务。因此，如果您在不使用任何命令行参数的情况下调用gulp，则将运行模板任务。gulp'dev'任务使您可以从命令行运行gulp dev，该命令行监视所有html文件的更改，并在html文件更改时触发模板任务。

gulp包含插件会扫描您的html文件，例如

= include relative/path/to/file.html

并包含“ file.html”内容。

包括语法在gulp-include网站上有很好的记录。