How to add links of other HTML files to index.html automatically using gulp?

Question

Something like archive pages on WordPress blogs. I'm using this gulp script it can generate multiple pages but can show only once when it runs the server and open the page in the browser.

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

I want test-template.html should have links of

templateA.html templateB.html templateC.html

so in the browser instead remembering and typing URL of these files I can just open by clicking on the link on index.html page

Is there any plugin to do this?

Answer 1

There are two packages that may be helpfull. Please double check task configs, to target your paths.

gulp-inject

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

Workflow looks pretty same as above.

Somewere in 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

Create gulp task and inside test-template.html insert defined html comments (between this comments the tmpl will be inserted).

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