web-dev-qa-db-fra.com

Compiler les partiels HTML avec gulp.js

Existe-t-il un plugin disponible pour Gulp qui fasse la même chose que Assemble pour Grunt?

Je voudrais exécuter une tâche pour Gulp qui assemble des partiels HTML, mais je ne trouve pas de plug-in. Quelqu'un en at-il déjà utilisé et pouvez-vous fournir un lien vers celui-ci?

MISE À JOUR: 21/04/2016

Dernièrement, j'utilisais Twig.js avec Gulp, ainsi que gulp-data pour rendre le JSON dans mes modèles. Mon article va dans les détails. Astuce: vous pouvez également utiliser Nunjucks, Swig.js, Guidon, etc.

Article: Templating avec Gulp et Twig.js

javascriptgulp
30
jthomas

Oui, vous pouvez le faire avec ce plugin appelé gulp-file-include

Exemple :

# 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

J'ai créé un plugin pour étendre les fichiers 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-->

sortie

<body>

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

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

</body>

Cela peut vous aider.

11
Frank Fang

J'aimerais ajouter un de plus:

J'utilise gulp-preprocess . C'est excellent pour construire non seulement du HTML, mais également du JavaScript, et peut même être utilisé en PHP . Il a des directives simples:

    <!-- @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 -->

J'ai une arborescence de répertoires comme celle-ci:

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

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

Pour chaque fichier HTML rendu, j'ai un fichier correspondant dans le dossier de construction et un dossier correspondant à ce nom de fichier. Le fichier build écoute les modifications dans le dossier correspondant et traite à l’avance les données qui sont ensuite exportées dans le fichier correspondant dans le dossier dist.

Comme le pré-traitement vous permet de transmettre des variables en tant qu’objet de contexte, je transmets les variables stockées dans un fichier JSON du dossier de construction parent, .e.g. index-variables.json, écrasant toutes les variables globales que j'ai définies.

Je l'utilise avec Livereload, donc le résultat est que chaque fois que je modifie une partie du code HTML, la page est rechargée presque instantanément avec le code HTML affiché - nous parlons moins d'une seconde. En plus d'être rapide, le prétraitement semble vraiment stable - je n'ai jamais eu de bogue.

C'est une façon géniale de travailler. 

8
dgo

Assemble prend désormais en charge Gulp: https://github.com/assemble/assemble bien que, au moment de la publication du site Web officiel d’Assemble, ne le mentionne pas et il existe très peu de documentation.

2
Dan

Vous pouvez le faire avec un plugin gulp appelé gulp-handlebars-file-include

C’est un très bon plugin, car il ne crée ni ne crée d’analyseur personnalisé comme gulp-file-include, ni ne définit de nouvelle syntaxe. Au lieu de cela, il utilise handlebars , par conséquent, non seulement il analyse avec handlebars, mais vous pouvez également compiler vos fichiers partiels avec handlebars et même inclure vos propres aides handlebars.

0
Alexander Leyva Caro