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

Question

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

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