Глоток HTML шаблонизатор

Question

Глоток HTML шаблонизатор

Кто-нибудь знал какой-нибудь плагин "gulp", который собирает (связывает) разные файлы с чем-то с расширением.html в один файл? Или что ближе к тому, что я пытаюсь достичь?

ех.

      строить
        | - HTML
            | - header.html
            | - footer.html
            | - main-section.html
        | - index.html
      расстояние 
        | - index.html (результат)

в файле index.html build

... некоторые метатеги...
      где-то внутри тега body


  /* I want something like */
  require('build/html/header.html);
  require('build/html/main-section.html);
  require('build/html/footer.html);
</pre>

И вывод будет HTML внутри этих файлов. Где также каждый из этих файлов (заголовок,...) есть что-то, что также требует.

PS Может кто-нибудь перечислить их со ссылками, пожалуйста? Большое спасибо.

1

html templates gulp gulp-plugin

Источник

user5509185 06 фев '16 в 15:00

2 ответа

Другие вопросы по тегам html templates gulp gulp-plugin

user5862315 06 фев '16 в 16:43 2016-02-06 16:43 · Answer 1 · 2016-02-06 16:43

Вы можете использовать gulp-inject. С README на github:

Чтобы внедрить содержимое файлов, вы должны предоставить пользовательскую функцию преобразования, которая будет возвращать содержимое файла в виде строки. В этом случае вы также должны опустить параметр {read: false} для gulp.src. В приведенном ниже примере показано, как внедрить содержимое html-частичек в заголовок index.html:

    gulp.src('./src/index.html')
  .pipe(inject(gulp.src(['./src/partials/head/*.html']), {
    starttag: '<!-- inject:head:{{ext}} -->',
    transform: function (filePath, file) {
      // return file contents as string 
      return file.contents.toString('utf8')
    }
  }))
  .pipe(gulp.dest('./dest'));

И в вашем./src/index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head:html -->
  <!-- contents of html partials will be injected here -->
  <!-- endinject -->
</head>
<body>
</body>
</html>

user5972510 19 дек '16 в 03:11 2016-12-19 03:11 · Answer 2 · 2016-12-19 03:11

Лучшим может быть gulp-inject-множественные файлы.

В файле глотка:

gulp.task('inject-files',function(){
 // begin injection 
  gulp.src('foo.html')
    .pipe(injectfiles('foo.html','parts'))
    .pipe(gulp.dest('temp'));

});

В вашем файле index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head-->
  <!-- inject:footer-->
</head>
<body>
</body>
</html>

Если это для шаблонов электронной почты, могу я также порекомендовать Zurb / Inky. Они довольно просты в использовании и не очень часто ломаются в перспективе