Есть ли плагин для Gulp, который делает то же самое, что и Assemble для Grunt?
Я хотел бы запустить задачу для Gulp, которая собирает частичные части HTML, но я не могу найти плагин. Кто-нибудь использовал один и может предоставить ссылку на него?
ОБНОВЛЕНИЕ: 4/21/2016
В последнее время я использую Twig.js с Gulp вместе с gulp -data для рендеринга JSON в моих шаблонах. Моя статья подробно обсуждается. Подсказка: вы также можете использовать Nunjucks, Swig.js, Handlebars и т.д.
Статья: Внешний шаблон с Gulp и Twig.js
Да, вы можете сделать это с помощью этого плагина под названием 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>
Я создал плагин для расширения 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>
Это может помочь вам.
Я хотел бы добавить еще одно:
Я использую 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 секунды. В дополнение к быстрому освещению препроцесс кажется действительно стабильным - у меня никогда не было ошибки.
Это потрясающий способ работы.
Теперь сборка поддерживает Gulp: https://github.com/assemble/assemble, хотя на момент публикации официального сайта Assemble это не упоминается, и там очень мало в документации.
Вы можете сделать это с помощью плагина gulp под названием gulp-handlebars-file-include
Это очень хороший плагин, потому что его доза не создает или не создает собственный парсер вроде gulp -file-include, а также не определяет новый синтаксис. Вместо этого он использует handlebars, поэтому он не только анализирует дескрипторы, но также вы можете скомпилировать свои частичные файлы с дескрипторами и даже включать свои собственные помощники handlebars.