Скомпилируйте частичные HTML файлы с помощью gulp.js

Есть ли плагин для Gulp, который делает то же самое, что и Assemble для Grunt?

Я хотел бы запустить задачу для Gulp, которая собирает частичные части HTML, но я не могу найти плагин. Кто-нибудь использовал один и может предоставить ссылку на него?

ОБНОВЛЕНИЕ: 4/21/2016

В последнее время я использую Twig.js с Gulp вместе с gulp -data для рендеринга JSON в моих шаблонах. Моя статья подробно обсуждается. Подсказка: вы также можете использовать Nunjucks, Swig.js, Handlebars и т.д.

Статья: Внешний шаблон с Gulp и Twig.js

Ответ 1

Да, вы можете сделать это с помощью этого плагина под названием gulp-file-include

Пример:

# index.html

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345
  })
  </body>
</html>

# view.html

<h1>view</h1>

# var.html

<label>@@name</label>
<label>@@age</label>

Ответ 2

Я создал плагин для расширения html файлов https://www.npmjs.org/package/gulp-html-extend

master.html

<body>
    <!-- @@placeholder=content -->
    <!-- @@placeholder=footer -->
</body>

content.html

<!-- @@master=master.html-->

<!-- @@block=content-->
<main>
    my content
</main>
<!-- @@close-->

<!-- @@block=footer-->
<footer>
    my footer
</footer>
<!-- @@close-->

Выход

<body>

<!-- start content -->
<main>
    my content
</main>
<!-- end content -->

<!-- start footer -->
<footer>
    my footer
</footer>
<!-- end footer -->

</body>

Это может помочь вам.

Ответ 3

Я хотел бы добавить еще одно:

Я использую gulp-preprocess. Это отлично подходит для создания не только html, но и JavaScript, и может даже использоваться в PHP. Он имеет простые директивы:

    <!-- @include filename.extension -->

    <!-- @ifdef foo -->
        Included html if foo is defined
    <!-- @endif -->

    Also @ifndef (not defined)

    Variables

    <!-- @echo bar -->

   Or even cooler:

    <a href="<-- @echo linkvar -->">link</a>

  Also (as far as I can tell) unlimited sub inclusion:

   <!--  I am an included file -->
   <!-- @include relative/to/me/data.html -->

У меня есть дерево каталогов:

     ./project root
         - build/
           - less/
             [less,..]
           - html/
               - index/
                 Index-variables.json
                 [Index-partials.html,...]
           Index.html
           [other-build-folders,..]

         - dist
           [htmlfiles,...,CSS folder,...]

Для каждого отображаемого html файла у меня есть соответствующий файл в папке сборки и соответствующая папка для этого имени файла. Файл сборки прослушивает изменения в соответствующей папке и препроцессы, которые затем выводятся в соответствующий файл в папке dist.

Поскольку препроцесс позволяет передавать переменные как объект контекста, я передаю переменные, хранящиеся в файле JSON, в родительской сборке, например .e.g. index-variables.json, переписывая любые глобальные переменные, которые я определил.

Я использую его с Livereload, поэтому результат заключается в том, что каждый раз, когда я делаю изменения в любом части HTML, страница перезагружается почти мгновенно с помощью рендеринга html - мы говорим меньше 1 секунды. В дополнение к быстрому освещению препроцесс кажется действительно стабильным - у меня никогда не было ошибки.

Это потрясающий способ работы.

Ответ 4

Теперь сборка поддерживает Gulp: https://github.com/assemble/assemble, хотя на момент публикации официального сайта Assemble это не упоминается, и там очень мало в документации.

Ответ 5

Вы можете сделать это с помощью плагина gulp под названием gulp-handlebars-file-include

Это очень хороший плагин, потому что его доза не создает или не создает собственный парсер вроде gulp -file-include, а также не определяет новый синтаксис. Вместо этого он использует handlebars, поэтому он не только анализирует дескрипторы, но также вы можете скомпилировать свои частичные файлы с дескрипторами и даже включать свои собственные помощники handlebars.