使用玉和咕unt彈加快HTML生產

將彙編為：

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span> Jade Tutorial <span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><p> class<span>="className"</span> id<span>="idName"</span>></p></span> Hello SitePoint Readers! <span><span></span>></span>
</span>    <span><span><span><img  src="/static/imghwm/default1.png" data-src="js/jquery.min.js" class="lazy" alt="使用玉和咕unt彈加快HTML生產" > src<span>="images/image.png"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

使用Jade，您不必編寫關閉標籤，這有助於避免潛在的錯誤，例如忘記添加關閉標籤或失去其正確順序。線路開頭的任何文本都被解釋為標籤。您需要為每個標籤使用適當的凹痕。

>注意：如果省略了標籤名稱，則將創建DIV作為默認標籤。 >

>要將屬性添加到標籤中，將它們放在標籤名稱之後的括號中，然後按照名稱= value格式。要分開多個屬性，請使用逗號。此外，可以用類和ID編寫。和＃符號分別如上一個示例。

>

使用管道字符（|）

>有時我們需要在新行上寫下標籤的原始內容，但是，正如我前面提到的，在行開頭的任何文本都被視為標籤

。為避免這種情況，請使用管道或|字符在線路的開頭，並在新行上寫入標籤的內部文本。 > >注意：為了查看您在Jade文件中進行的更改，您需要根據我們創建之前的grunt任務運行grunt。

強大的翡翠特徵grunt

在上一節中，我對玉的語法進行了快速概述。在以下各節中，我們將介紹一些其他常見和強大的玉器功能，以及一些更高級的玉。我們將通過簡單的“工作空缺頁面”示例來做到這一點。您可以在源代碼文件中的每種情況或此github存儲庫中找到每個情況的完整示例。讓我們開始！

塊並擴展（玉繼承）

>

>稱為layout.jade的文件將是我們頁面佈局的基本結構，這是一種干燥的概念，因為您無需為每個頁面編寫這些標籤。相反，您需要擴展佈局並開始編寫塊內容特定的代碼，如我們所見。 塊是分離或組織佈局的。然後可以在另一個文件中覆蓋它。

>

>注意：刪除了CSS和JavaScript代碼以進行簡潔和焦點。您可以在存儲庫中找到這些。另外，我已經使用了複製grunt任務將JS和样式目錄從應用程序目錄傳輸到構建目錄。

這是layout.jade file：

>

>您可以根據需要創建腳步和jade。對於我們的頁面，我們將使用Foundation和jQuery來幫助我們建立一些基本的設計和功能。

>

這是partials/head.jade文件：

doctype html
html(lang="en" dir="ltr")
  block head
    include partials/head.jade

  body
    block content
    block footer
      include partials/footer.jade

這是partials/footer.jade文件：

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span> Jade Tutorial <span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><p> class<span>="className"</span> id<span>="idName"</span>></p></span> Hello SitePoint Readers! <span><span></span>></span>
</span>    <span><span><span><img  src="/static/imghwm/default1.png" data-src="js/jquery.min.js" class="lazy" alt="使用玉和咕unt彈加快HTML生產" > src<span>="images/image.png"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

在下一個代碼段中，我們將創建Jobs.jade，該JADE使用Extend Sexts關鍵字繼承我們的佈局，然後覆蓋所需的塊來使用所有其他文件。在此示例中，我們覆蓋內容塊。

>

jobs.jade：

doctype html
html(lang="en" dir="ltr")
  block head
    include partials/head.jade

  body
    block content
    block footer
      include partials/footer.jade

>但是，如果我們不需要覆蓋整個塊怎麼辦？如果我們只需要添加內容怎麼辦？讓我們以障礙物為例。我們需要在標題中為此頁面添加一個特殊的腳本，因此我們將在塊之後使用附加或預讀關鍵字。

head
  meta(name="viewport", content="width=device-width, initial-scale=1.0")
  meta(charset="UTF-8") 
  title Jobs
  link(rel = "stylesheet" href = "style/foundation.min.css")
  link(rel = "stylesheet" href = "style/app.css")

>使用迭代和混音

在上一節中，我們包括Job-Container.jade。在本節中，我們將研究循環和混合物的好處，以及如何在Jade中使用它們。

這是新代碼段的初始版本：

如您所見，我們正在使用多個普通循環語句，例如第一行中的一個 - 作業中的每個作業。 - 字符用於未直接添加任何輸出的無封閉代碼。

>

在以前的代碼段中，有冗餘代碼可以使用Mixins變乾，如以下代碼：：

div#footer.row
  div.small-12.large-12.columns
    p Copyright (c) foobar
script()
script()
script()

>在這裡，我們使用Mixin功能創建了可重複使用的Jade塊。混合素就像具有名稱並在其內部代碼中評估的參數的方法（或函數）。在上面的示例中，我們創建了一個稱為SkillsBlock（）的Mixin。

>要使用此Mixin，我們只編寫其名稱並傳遞適當的參數值，並將Mixin名稱和符號前綴以將其識別為Mixin Call。

>注意：與上述代碼一樣，我們可以通過=，！ =或＃{}來評估值。但是，當您使用！ =時，請小心，這不會逃脫，因此對於用戶輸入不安全。

extends layout.jade
block content
  div#container.row
    div.small-12.large-12.columns
      include job-container.jade

通過GRUNT

傳遞JSON數據

建立我們的環境後，讓我們通過使用grunt任務將JSON數據從JSON文件傳遞到Jade的JOSON數據來做一些很棒的事情。

>首先，創建JSON文件data.json，然後用所需的數據填充它。 >

然後打開gruntfile.js，然後將數據屬性添加到Jade任務的選項中，如下：

>作業數據/當地人（傳遞給Jade模板的數據稱為當地人）屬性將傳遞給文件屬性中標識的JADE文件，並且可以在Jade代碼中使用。這種方式使您能夠輕鬆地將文本內容添加到網頁中。

>

>最後，如果您查看演示，您可以看到頁面的外觀。當然，該來源是編譯的，因此在這種情況下，演示並不重要。屏幕截圖如下所示。

總結

使用模板引擎的理由可能會有所不同，但可以將它們歸類為更高的生產力，更少的重複和具有更愉快的語法。另外，您可能不想用母語編寫代碼，因為它過於重複，容易出錯，或者您根本不喜歡它。這是像Jade這樣的語言，調整了您的代碼簡潔而簡單，開始發揮作用。

Jade可以幫助您編寫清潔器代碼，這使您的工作變得不那麼乏味。我們使用Grunt涵蓋了一些基本知識，技巧和技巧。您可以在本教程中了解更多有關Jade的信息，因此您可以查看官方文檔以獲取更多信息。

>

>常見問題（常見問題解答）關於使用Jade和Grunt加快HTML生產

什麼是翡翠，為什麼我應該將其用於HTML生產？它通過允許您編寫易於維護的干淨，可讀的代碼來簡化編寫HTML的過程。它還支持動態代碼，可重複使用的塊和包含，它們可以顯著加快HTML生產的速度。

>如何在加速HTML生產時如何補充Jade？

grunt是JavaScript任務跑步者自動化重複的任務，例如縮小，編譯，單位測試和覆蓋。當與翡翠一起使用時，可以將翡翠模板編譯到HTML中的過程中，從長遠來看可以節省大量的時間和精力。

>

我如何安裝Jade and Grunt？ >可以通過NPM（節點軟件包管理器）安裝Jade和Grunt。您可以通過在終端或命令提示符中安裝'npm安裝grunt -cli -g'來安裝'jade和grunt。

有幾種可以將HTML轉換為Jade的在線工具，例如html2jade.org和codebeautify.org。但是，如果要以編程方式將HTML轉換為Jade，則可以使用“ HTML2Jade” NPM軟件包。

>

>使用HTML用於Jade Conversion的在線工具有什麼好處？對於HTML到Jade轉換，易於使用，不需要任何安裝。他們可以快速將您的HTML代碼轉換為Jade語法，如果您是Jade的新手，或者如果您有大量需要轉換的HTML代碼，這可能會非常有幫助。

>

>我如何使用' HTML2JADE'NPM軟件包，用於HTML到Jade轉換？

>

>通過NPM安裝'HTML2Jade'軟件包後，您可以使用它來轉換通過在終端或命令提示符中運行“ html2jade yourfile.html”，通過運行“ html2jade yourfile.html ”到Jade。這將輸出相當於您的HTML代碼的JADE。

>我可以將Jade與其他任務跑步者一起使用，例如Gulp？

是的，可以與Gulp這樣的其他任務跑步者使用Jade。有一些可用於大口的插件可以將玉模板編譯為HTML，類似於Grunt。使用“ Include”關鍵字，然後使用文件的路徑。這對於在多個模板中包括標頭和頁腳等常見元素非常有用。

>我可以在我的玉模板中使用javascript嗎？您可以使用' - '字符在玉模板中啟動JavaScript代碼線。

>

>如何在玉模板中調試錯誤？

jade> jade提供可以幫助您的詳細錯誤消息，您在模板中調試錯誤。如果您使用的是Grunt，也可以使用“ Grunt-Contrib-jade”插件，該插件提供了調試Jade模板的“ Jade：debug”任務。

以上是使用玉和咕unt彈加快HTML生產的詳細內容。更多資訊請關注PHP中文網其他相關文章！