node.js - 如何使用 gulp 自动将其他 HTML 文件的链接添加到 index.html？

Question

类似于 WordPress 博客上的存档页面。我正在使用这个 gulp script它可以生成多个页面，但在运行服务器并在浏览器中打开页面时只能显示一次。

  server: {
            baseDir: "./output",
            index: "test-template.html"
        },

我希望 test-template.html 应该有链接

模板A.html模板B.html模板C.html

所以在浏览器中记住并输入这些文件的 URL，我可以通过单击 index.html 页面上的链接打开

有没有插件可以做到这一点？

Answer 1

有两个软件包可能会有所帮助。请仔细检查任务配置，以定位您的路径。

gulp-注入(inject)

https://www.npmjs.com/package/gulp-inject

工作流程看起来和上面的差不多。

有些在 test-template.html

<!-- inject:html -->
<!-- endinject -->

gulpfile.js

var inject = require('gulp-inject');

gulp.src('test-template.html')
  .pipe(inject(
    gulp.src(['templates/*.html'], { read: false }), {
      transform: function (filepath) {
        if (filepath.slice(-5) === '.html') {
          return '<li><a href="' + filepath + '">' + filepath + '</a></li>';
        }
        // Use the default transform as fallback: 
        return inject.transform.apply(inject.transform, arguments);
      }
    }
  ))
  .pipe(gulp.dest('./'));

gulp-linker [已弃用]

https://www.npmjs.com/package/gulp-linker

创建 gulp 任务并在 test-template.html 中插入定义的 html 注释(在这些注释之间插入 tmpl)。

有些在 test-template.html

<!--LINKS-->
<!--LINKS END-->

gulpfile.js

var linker = require('gulp-linker'),

// Read templates 
gulp.src('test-template.html')
  // Link the JavaScript 
  .pipe(linker({
    scripts: [ "templates/*.html" ],
    startTag: '<!--LINKS-->',
    endTag: '<!--LINKS END-->',
    fileTmpl: '<a href="%s">%s</a>',
    appRoot: 'www/'
  }))
  // Write modified files to www/ 
  .pipe(gulp.dest('www/'));