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

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

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

我想要test-template.html应该有链接

templateA.html templateB.html templateC.html

所以在浏览器中，而不是记住和input这些文件的URL，我可以通过点击index.html页面上的链接来打开

有没有插件来做到这一点？

Answer 1

有两个可能有用的软件包。 请仔细检查任务configuration，以定位您的path。

一饮而尽，注入

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

工作stream看起来与上面相同。

有些在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

创buildgulp任务，并在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/'));