検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >JadeとGruntを使用して、HTML生産をスピードアップします

JadeとGruntを使用して、HTML生産をスピードアップします

Christopher Nolan
Christopher Nolanオリジナル
2025-02-24 08:24:19241ブラウズ

Using Jade and Grunt to Speed Up HTML Production 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span>
</span>    <span><span><span><img</span> src<span>="images/image.png"</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Jadeを使用して、閉鎖タグを作成する必要はありません。これは、閉鎖タグの追加を忘れたり、それらの正しい注文を失ったりするなど、潜在的な間違いを回避するのに役立ちます。行の先頭にあるテキストは、タグとして解釈されます。タグごとに適切なインデントを使用する必要があります。

注：タグ名が省略されている場合、divはデフォルトのタグとして作成されます。

タグに属性を追加するには、タグ名の後に括弧内に置き、name = valueフォーマットに従います。複数の属性を分離するには、コンマを使用します。さらに、クラスとIDを記述できます。前の例のように、それぞれ＃シンボル。

パイプ文字（|）

を使用して

新しい行にタグの生のコンテンツを書く必要がある場合がありますが、前述したように、行の先頭にあるテキストはタグと見なされます。これを避けるために、パイプまたは|を使用してください行の先頭にあるキャラクターと、新しい行にタグの内側のテキストを書きます。

注：ジェイドファイルで行った変更をコンパイルして確認するには、以前に作成したgruntタスクに基づいてgruntを実行する必要があります。

grunt

の強力なジェイド機能

前のセクションでは、Jadeの構文の簡単な概要を説明しました。次のセクションでは、他のいくつかの一般的で強力なジェイド機能と、さらにいくつかの高度な機能を説明します。これを行います。簡単な「ジョブアクセスページ」サンプルを使用します。ソースコードファイルまたはこのgithubリポジトリから、各ケースの完全な例を見つけることができます。始めましょう！

ブロックと拡張（jade継承）

layout.jadeと呼ばれるファイルは、ページのレイアウトの基本構造になります。これは、各ページにこれらのタグを記述する必要がないため、一種のドライコンセプトです。代わりに、レイアウトを拡張して、ブロックコンテンツ固有のコードの書き込みを開始する必要があります。

ブロックは、レイアウトを分離または整理するようなものです。その後、別のファイルで上書きすることができます。

注：CSSとJavaScriptコードは、簡潔に焦点を合わせて削除されます。これらはレポで見つけることができます。また、JSおよびスタイルディレクトリをアプリディレクトリからビルドディレクトリに転送するために、コピーグラントタスクを使用しました。

ここにレイアウトがあります

footer.jade and head.hadeを作成することができます。私たちのページでは、基礎とjQueryを使用して、基本的な設計と機能を確立するのに役立ちます。

ここにpartials/head.hadeファイルがあります：

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

  body
    block content
    block footer
      include partials/footer.jade
ここにPartials/Footer.Hadeファイルがあります：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span>
</span>    <span><span><span><img</span> src<span>="images/image.png"</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

コードの次のスニペットでは、Jobs.jadeを作成します。これは、extendsキーワードを使用してレイアウトを継承し、必要なブロックを上書きすることにより、他のすべてのファイルを使用します。この例では、コンテンツブロックを上書きします

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で使用する方法について説明します。

これが新しいコードスニペットの初期バージョンです：

ご覧のとおり、最初の行のような複数の通常のループステートメント（ジョブの各ジョブ）を使用しています。 - 文字は、出力を直接追加しないバッファーコードに使用されます。

以前のコードのスニペットには、次のコードのように、ミキシンを使用してドライエルになる可能性のある冗長コードがあります。 
div#footer.row
  div.small-12.large-12.columns
    p Copyright (c) foobar
script(src="js/jquery.min.js")
script(src="js/foundation.min.js")
script(src="js/app.js")

ここでは、Mixin機能を使用してJadeの再利用可能なブロックを作成しています。ミキシンは、名前を持つ方法（または関数）のようなものであり、内部コードで評価するための引数を取ります。上記の例では、Skillsblock（）と呼ばれるMixinを作成しました。 このミックスインを使用するには、その名前を記述して適切なパラメーター値を渡すだけで、ミキシン名がミックスコールとして識別するためのサインを付けてプレフィックスします。

注：上記のコードと同様に、=、！=または＃{}のいずれかの値を評価できます。ただし、使用する場合は注意してください！=は、逃げられないので、ユーザーの入力には安全ではありません。

grunt

を介してjsonデータを渡します 
extends layout.jade
block content
  div#container.row
    div.small-12.large-12.columns
      include job-container.jade
環境を確立した後、JSONファイルからJSONデータをgruntタスクを使用してjadeに渡すことにより、GruntとJadeの組み合わせで素晴らしいことをしましょう。

最初は、jsonファイルdata.jsonを作成し、目的のデータを入力してください。

次に、gruntfile.jsを開き、次のように、Jadeタスクのオプションにデータ属性を追加します。

Jobsデータ/地元の人々（Jadeテンプレートに渡されたデータは地元の人と呼ばれます）属性は、ファイルプロパティで識別されたJadeファイルに渡され、Jadeコードで使用できます。この方法では、テキストコンテンツをWebページに簡単に追加することができます。

最後に、デモをチェックした場合、ページの外観を確認できます。もちろん、ソースはコンパイルされているため、この場合はデモがほとんど重要ではありません。スクリーンショットを以下に示します。

ラッピング

テンプレートエンジンを使用する理由は異なる場合がありますが、生産性の向上、繰り返しの減少、より​​快適な構文を持つことに分類できます。また、ネイティブ言語でコードを書きたくないかもしれません。なぜなら、それはあまりにも繰り返し、エラーが発生しやすいので、それが好きではないかもしれないからです。これは、ジェイドのような言語が、あなたのコードを簡潔でシンプルに保つように調整されている場所です。

Jadeは、クリーナーコードの作成を支援します。これにより、仕事をするのが面倒ではありません。グラントを使用して、基本とヒントとコツのいくつかを取り上げました。このチュートリアルでは説明していないジェイドについて学ぶことができるので、公式ドキュメントを詳細に確認できます。 Jade and Gruntを使用してHTML制作をスピードアップすることについて、よくある質問（FAQ）

Jadeとは何ですか？なぜHTMLの生産に使用する必要があるのですか？ Jadeは現在PUGとして知られています。メンテナンスが容易な、きれいで読みやすいコードを作成できるようにすることで、HTMLを作成するプロセスを簡素化します。また、HTMLの生産を大幅に高速化できる動的コード、再利用可能なブロック、および含まれることもサポートします。ミニフィッシュ、コンピレーション、単体テスト、糸くずなどの繰り返しタスクを自動化します。 Jadeで使用すると、GruntはJadeテンプレートをHTMLにコンパイルするプロセスを自動化できます。これにより、長期的には多くの時間と労力を節約できます。 > JadeとGruntの両方は、NPM（ノードパッケージマネージャー）を介してインストールできます。 Jadeを実行してJadeをインストールします 'NPMインストールJade -G'とGruntは、ターミナルまたはコマンドプロンプトにGrunt -Cli -Gをインストールする 'npmインストールを実行します。

html2jade.orgやcodebeautify.orgなど、HTMLをJadeに変換できるいくつかのオンラインツールがあります。ただし、HTMLをプログラムでヒードに変換する場合は、「HTML2JADE」NPMパッケージを使用できます。 HTMLのジェイドへの変換は使いやすく、インストールは必要ありません。 HTMLコードをJade Syntaxにすばやく変換できます。これは、Jadeを初めて使用する場合、または変換する必要があるHTMLコードが大量にある場合に非常に役立ちます。 html2jade 'npmパッケージhtml for html to jade conversion？

npm経由で「html2jade」パッケージをインストールした後、使用できますターミナルまたはコマンドプロンプトで「HTML2JADE YourFile.html」を実行してHTMLをJadeに変換します。これにより、HTMLコードに相当するJadeが出力されます。

gulpのような他のタスクランナーと一緒にジェイドを使用できますか？

はい、ジェイドはgulpのような他のタスクランナーと一緒に使用できます。 Gruntと同様に、JadeテンプレートをHTMLにコンパイルできるGulpで利用できるプラグインがあります。 「含める」キーワードを使用して、ファイルへのパスが続きます。これは、複数のテンプレートにヘッダーやフッターなどの一般的な要素を含めるのに非常に役立ちます。

ジェイドテンプレートでJavaScriptを使用できますか？ 「 - 」文字を使用して、ジェイドテンプレートでJavaScriptコードの行を起動できます。テンプレートでエラーをデバッグします。 Gruntを使用している場合は、Jadeテンプレートをデバッグするための「Jade：Debug」タスクを提供する「Grunt-Contrib-Jade」プラグインを使用することもできます。

以上がJadeとGruntを使用して、HTML生産をスピードアップしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript json jquery css less gulp html npm if for format include require Directory Error using Attribute Property append copy JS default this input github kind prompt Foundation Prompt Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：純粋なCSSを使用したスタイルスイッチャーの構築：チェック済み次の記事：純粋なCSSを使用したスタイルスイッチャーの構築：チェック済み

関連記事

続きを見る