it-swarm.com.ru

Компиляция HTML-паролей с помощью gulp.js

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

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


ОБНОВЛЕНИЕ: 21.04.2016

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

Article: Шаблоны внешнего интерфейса с Gulp и Twig.js

30
jthomas

Да, вы можете сделать это с помощью этого плагина с именем 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>
38
Wahyu Kristianto

Я сделал плагин для расширения 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>

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

11
Frank Fang

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

Я использую 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-файла у меня есть соответствующий файл в папке сборки и соответствующая папка для этого имени файла. Файл build прослушивает изменения в соответствующей папке и предварительно обрабатывает эти данные, которые затем выводятся в соответствующий файл в папке dist.

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

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

Это отличный способ работать. 

8
dgo

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

2
Dan

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

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

0
Alexander Leyva Caro