如何在 Gulp 中构建指向 html 文件的链接列表？答案

【问题标题】：How to build a list of links to html files in Gulp?如何在 Gulp 中构建指向 html 文件的链接列表？
【发布时间】：2019-07-09 09:29:00
【问题描述】：

如何使用 Gulp 在一个 html 文件中收集目录中所有页面的列表？

例如，在 build 目录中，我有两个文件 contact.html，标题为 “Contacts” 和 faq.html，标题为 “常见问题”，我需要获取它们并创建一个ui.html，这将是一个链接到表单文件的列表：

<a href="faq.html">Frequently asked questions</a>
<a href="contact.html">Contacts</a>

好吧，加上你的设计步骤（一个连接的 css 文件）。

找到gulp-listing模块，但无法自定义，如下：

gulp.task('scripts', function() {
return gulp.src('./src/*.html')
.pipe(listing('listing.html'))
.pipe(gulp.dest('./src/'));
});

【问题讨论】：

gulp-listing 对你有用吗？以及你想如何修改它的结果？
@Mark 工作但速度很慢，并且没有选项可以将您的 css 样式添加到结果页面

标签： html npm gulp

【解决方案1】：

为此我使用了两个 gulp 模块。

gulp-filelist - 用于创建文件列表

gulp-modify-file - 用于更新此文件

gulp
  .src(['./html/**/*.html'])
  .pipe(require('gulp-filelist')('filelist.js', { relative: true }))
  .pipe(require('gulp-modify-file')((content) => {
     const start = 'var list = '
     return `${start}${content}`
   }))
 .pipe(gulp.dest('js'))

运行 gulp 后，你得到了 js/filelist.js 类似这样的东西：

 var list = [
   "Cancellation/template.html",
   "Cancellation/email.html",
 ]

你可以在你的html文件中添加这个脚本，并用js显示所有信息。

【讨论】：