如何使用Gulp生成目录内HTML文件的自定义链接列表页面

嘿，我来帮你搞定这两个Gulp的需求，针对你提到的gulp-listing不够灵活的问题，我准备了更自定义的实现方案，完全能满足你的要求：

如果你只是需要生成一个包含所有HTML文件链接的列表（类似gulp-listing的功能，但更灵活），可以用through2（流处理工具）结合cheerio（HTML解析库）来实现，这样你可以完全控制链接的格式和内容。

首先安装依赖：

npm install through2 cheerio gulp-util --save-dev

然后写一个自定义的Gulp任务：

const gulp = require('gulp');
const through2 = require('through2');
const cheerio = require('cheerio');
const gutil = require('gulp-util');

gulp.task('generate-link-list', function() {
  // 存储所有页面的链接信息
  let linkItems = [];

  return gulp.src('./src/*.html') // 替换成你的HTML文件路径
    .pipe(through2.obj(function(file, encoding, callback) {
      // 解析当前HTML文件，提取<title>标签内容
      const htmlContent = file.contents.toString();
      const $ = cheerio.load(htmlContent);
      const pageTitle = $('title').text() || file.basename; // 无title时用文件名替代
      const relativePath = file.relative; // 获取文件相对路径，比如about.html

      // 生成单个链接的HTML代码
      linkItems.push(`<a href="${relativePath}">${pageTitle}</a>`);
      callback();
    }, function(callback) {
      // 所有文件处理完后，生成最终的列表文件
      const listHtml = linkItems.join(' '); // 用空格分隔链接，可改成换行、逗号等
      const listFile = new gutil.File({
        path: 'listing.html', // 生成的文件名
        contents: Buffer.from(listHtml)
      });

      this.push(listFile);
      callback();
    }))
    .pipe(gulp.dest('./src/')); // 输出到目标目录
});

运行gulp generate-link-list就能生成自定义格式的链接列表文件，你可以随意修改链接的包裹标签（比如改成<li>做成列表）或者分隔符。

这个需求是问题1的延伸，我们可以在生成链接列表的基础上，构建一个完整的HTML页面，还能引入自定义CSS美化样式。

同样先安装依赖（如果之前没装的话）：

npm install through2 cheerio gulp-util --save-dev

针对你提到的build目录下的contact.html和faq.html，编写生成ui.html的Gulp任务：

const gulp = require('gulp');
const through2 = require('through2');
const cheerio = require('cheerio');
const gutil = require('gulp-util');

gulp.task('generate-ui-page', function() {
  let pageData = [];

  return gulp.src('./build/*.html') // 读取build目录下的所有HTML文件
    .pipe(through2.obj(function(file, encoding, callback) {
      // 解析HTML，提取标题
      const $ = cheerio.load(file.contents.toString());
      const pageTitle = $('title').text() || file.basename;
      const pagePath = file.relative;

      pageData.push({ path: pagePath, title: pageTitle });
      this.push(file); // 保留原文件，不需要可删除这行
      callback();
    }, function(callback) {
      // 生成ui.html的完整内容
      // 自定义CSS链接，样式文件可放在build/styles/ui.css
      const customCss = '<link rel="stylesheet" href="styles/ui.css">';

      // 生成链接列表，这里用无序列表更美观，也可改回你要的格式
      const linkList = pageData.map(page => 
        `<li><a href="${page.path}">${page.title}</a></li>`
      ).join('');

      const uiHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Index</title>
  ${customCss}
</head>
<body>
  <h1>All Pages</h1>
  <ul class="page-index">
    ${linkList}
  </ul>
</body>
</html>
      `.trim();

      // 创建ui.html文件
      const uiFile = new gutil.File({
        path: 'ui.html',
        contents: Buffer.from(uiHtml)
      });

      this.push(uiFile);
      callback();
    }))
    .pipe(gulp.dest('./build/')); // 输出到build目录
});

自定义小技巧： #

• 如果你想要和示例里一样的<a href="faq.html">...</a>空格分隔格式，把linkList改成：

  const linkList = pageData.map(page => 
    `<a href="${page.path}">${page.title}</a>`
  ).join(' ');
  

  再把<ul>...</ul>换成<div class="page-links">${linkList}</div>即可。
• 自定义样式：在build/styles/ui.css里写样式，比如：

  .page-index {
    list-style: none;
    padding: 0;
  }
  .page-index li {
    margin: 8px 0;
  }
  .page-index a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 16px;
  }
  .page-index a:hover {
    text-decoration: underline;
  }
  

运行gulp generate-ui-page后，build目录下就会生成带自定义样式的ui.html文件了。

内容的提问来源于stack exchange，提问作者alexsoin