使用gulp.js編譯HTML偏分組

是否有可用於Gulp的插件與Assemble for Grunt做同樣的事情？使用gulp.js編譯HTML偏分組

我想運行一個Gulp任務來組裝HTML部分，但我找不到插件。有沒有人使用過，你可以提供一個鏈接嗎？

更新：2016年4月21日

最近，我一直在使用Twig.js與咕嘟咕嘟一飲而盡與數據一起呈現在我的模板JSON。我的文章詳細介紹。提示：您還可以使用Nunjucks，Swig.js，把手等

文章：Frontend templating with Gulp and Twig.js

來源

2014-02-24 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>

來源

2014-02-25 07:32:53

啊。謝謝。這比Assemble的強大得多，但它會工作，直到Assemble允許他們的插件與Gulp一起使用。 – jthomas

我在想同樣的事情jthomas，但是我剛剛注意到你在一年多以前發佈了這個帖子，並且組裝支持gulp依然不存在，所以我不會再持有我的呼吸......回到咕嚕聲。 – Chad

只是一個更新，我已經使用Swig JS模板引擎與gulp-swig插件。 – jthomas

我做了一個插件來擴展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>

它可以幫助你。

來源

2014-07-28 14:41:42

這看起來也很棒！肯定會試一試。謝謝！ – jthomas

這是爲了擴展布局。它可以像http://hammerformac.com/docs/tags/includes一樣工作嗎？ –

@JitendraVyas是的，它支持@@ include標記。 –

我想補充一點：

我用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文件夾是文件中的相應文件和相應的文件夾名稱。 構建文件監聽相應文件夾中的更改並預處理該數據，然後將該數據輸出到文件夾中的匹配文件。

由於預處理允許你傳遞變量作爲一個上下文對象，我通過存儲在父生成文件夾中的JSON文件，.e.g變量。 index-variables.json，覆蓋我定義的任何全局變量。

我將它與Livereload一起使用，因此結果是每當我在任何html部分中進行更改時，頁面都會以呈現的html幾乎立即重新加載 - 我們談論的時間不到1秒。除了快速減輕外，預處理看起來非常穩定 - 我從來沒有遇到過錯誤。

這是一種非常棒的工作方式。

來源

2014-10-19 16:14:36 user1167442

組裝現在支持Gulp：https://github.com/assemble/assemble，雖然在發佈官方Assemble網站時沒有提到這一點，並且文檔的方式很少。

來源

2016-09-24 14:29:24 Dan

這將是非常有益的，首先解釋一下什麼'Assemble'是爲什麼這是否值得點擊 – vsync

問題問：「Gulp是否有可用的插件，與Assemble for Grunt的功能相同？」。我的回答是，「集結現在與Gulp合作」。我認爲沒有必要解釋Assemble是什麼，因爲這不是問題。 – Dan

我不讀問題，因爲標題而來自谷歌。標題是問題不是沒有人有時間閱讀之後:) – vsync

你可以叫gulp-handlebars-file-include

這是一個很好的插件一飲而盡插件做到這一點，因爲它劑量不會創建或自定義的解析器一樣，大口喝，文件包括，也不能定義一個新的語法。相反，它使用handlebars，因此，它不僅與車把解析，也可以用車把，甚至編譯諧音文件包括你自己車把幫手。

來源

2017-05-03 21:18:22

使用gulp.js編譯HTML偏分組

回答

相關問題