Question

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

例如，在构建目录中，我有两个文件名为{strong>“联系人” 的文件contact.html和具有标题为“常见问题”的文件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/'));
});

Answer 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显示所有信息。

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

1 个答案: