web-dev-qa-db-ja.com

gulp.jsでHTMLパーシャルをコンパイルします

GrumpのAssembleと同じことを行うGulpのプラグインはありますか？

HTMLパーシャルをアセンブルするGulpのタスクを実行したいのですが、プラグインが見つかりません。誰かがそれを使用しましたか、それへのリンクを提供できますか？

更新：2016/4/21

最近、テンプレートでJSONをレンダリングするためにgulp-dataとともにTwig.jsをGulpとともに使用しています。私の記事は詳しく説明します。ヒント：Nunjucks、Swig.js、Handlebarsなども使用できます。

記事： GulpおよびTwig.jsを使用したフロントエンドテンプレート

javascriptgulp
32
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>
39
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

もう1つ追加します。

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 fileは、対応するフォルダーの変更をリッスンし、そのデータを前処理してからの一致するファイルに出力しますdistフォルダー。

プリプロセスでは変数をコンテキストオブジェクトとして渡すことができるため、親ビルドフォルダーのJSONファイルに保存されている変数を渡します。 index-variables.json、定義したグローバル変数を上書きします。

私はLivereloadでそれを使用しているので、結果は、htmlパーシャルに変更を加えるたびに、レンダリングされたhtmlでページがほぼ瞬時にリロードされることです-1秒未満です。軽量化に加えて、前処理は本当に安定しているように見えます。バグは一度もありません。

これは素晴らしい働き方です。

8
dgo

AssembleはGulpをサポートするようになりました： https://github.com/assemble/assemble .

2
Dan

gulp-handlebars-file-include と呼ばれるgulpプラグインで実行できます

これは、gulp-file-includeなどのカスタムパーサーを作成または作成せず、新しい構文を定義しないため、非常に優れたプラグインです。代わりに handlebars を使用するため、handlebarsで解析するだけでなく、handlebarsさらに、独自のhandlebarsヘルパーを含めることもできます。

0
Alexander Leyva Caro