npm 使用 gulp 将静态文件连接到目录中的所有文件答案

【问题标题】：npm concat a static file to all files in directory using gulpnpm 使用 gulp 将静态文件连接到目录中的所有文件
【发布时间】：2016-07-01 12:21:48
【问题描述】：

我曾尝试使用 npm-concat，但它会连接文件夹中的所有文件。但我的要求是这样的——

我有一个名为“header.html”、“footer.html”的文件，我有一个名为 view 的文件夹，其中有 html 的原始文本。

tpl
---- header.html
---- footer.html
view
---- view1.html
---- view2.html

现在我想将 header.html 附加到视图下的所有文件中，并且我想将 footer.html 附加到视图文件夹下的所有文件中。我们如何才能做到这一点？

【问题讨论】：

标签： node.js npm gulp

【解决方案1】：

我认为您最好考虑使用诸如handlebars 之类的模板引擎来完成此任务，而不是连接文件。不过既然你问了，我会尽量回答你的问题。

我不知道有任何插件可以以最佳方式做到这一点。但是，我编写了一个名为 gulp-transform 的插件，可以让您轻松完成此操作。

const gulp = require('gulp');
const transform = require('gulp-transform');
const readFileSync = require('fs').readFileSync;

const HEADER = readFileSync('tpl/header.html');
const FOOTER = readFileSync('tpl/footer.html');

gulp.task('html', () => {
  return gulp.src('view/*.html')
    .pipe(transform(contents => Buffer.concat([HEADER, contents, FOOTER])))
    .pipe(gulp.dest('dist'));
});

这有点难看，实际上我只建议在没有更好的选择时使用此插件进行快速修复。一个更好的解决方案是定义一个完全执行此操作的自定义插件。如果您认为这会有所帮助，我可以向您展示如何做到这一点。不过，这涉及更多。我真的认为您最好的选择是使用模板引擎。

【讨论】：