Как добавить ссылки других HTML файлов в index.html автоматически с помощью gulp?

Что-то вроде архивных страниц в блогах WordPress. Я использую этот gulp script, он может создавать несколько страниц, но может отображаться только один раз, когда он запускает сервер и открывает страницу в браузере.

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

Я хочу, чтобы test-template.html должен иметь ссылки

templateA.html templateB.html templateC.html

поэтому в браузере вместо запоминания и ввода URL-адресов этих файлов я могу просто открыть, щелкнув ссылку на странице index.html

Есть ли какой-нибудь плагин для этого?

Ответы

Ответ 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 [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/'));