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

Question

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

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

我希望test-template.html应该有

的链接

templateA.html templateB.html templateC.html

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

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

Answer 1

有两个包可能有帮助。请仔细检查任务配置，以确定目标。

吞掉-注入

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 [depracated]

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/'));