Verwenden Sie Jade und Grunzen, um die HTML -Produktion zu beschleunigen-CSS-Tutorial-php.cn

Using Jade and Grunt to Speed Up HTML Production

, das in:

kompiliert

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

Nach dem Login kopieren

Mit JADE müssen Sie keine Schluss -Tags schreiben, um potenzielle Fehler zu vermeiden, z. B. das Vergessen, Schluss -Tags hinzuzufügen oder die richtige Reihenfolge zu verlieren. Jeder Text am Anfang einer Zeile wird als Tag interpretiert. Sie müssen für jedes Tag die richtige Eindrücke verwenden.

Hinweis: Wenn der Tag -Name weggelassen wird, wird ein Div als Standard -Tag erstellt.

Um einem Tag Attribute hinzuzufügen, nach dem Tag -Namen in Klammern in Klammern einzulegen und dem NAME = Value -Format zu folgen. Verwenden Sie ein Komma, um mehrere Attribute zu trennen. Darüber hinaus können Klassen und IDs geschrieben werden. und # Symbole jeweils wie im vorherigen Beispiel.

Verwenden Sie das Rohrzeichen (|)

Manchmal müssen wir den Rohinhalt eines Tags in einer neuen Zeile schreiben, aber wie ich bereits erwähnt habe, wird jeder Text am Anfang einer Zeile als Tag angesehen. Um dies zu vermeiden, verwenden Sie das Rohr oder | Zeichen am Anfang der Zeile und schreiben Sie den inneren Text für das Tag in der neuen Zeile.

Hinweis: Um die in der JADE -Datei vorgenommenen Änderungen zu sehen, die sie zusammenstellen, müssen Sie Grunzen basierend auf der zuvor erstellten Grunzenaufgabe ausführen.

Mächtige Jade -Funktionen mit Grunzen

Im vorherigen Abschnitt habe ich Ihnen einen kurzen Überblick über die Syntax von Jades gegeben. In den folgenden Abschnitten werden wir einige andere gemeinsame und leistungsstarke Jade -Funktionen zusammen mit einigen weiteren fortgeschrittenen durchlaufen. Wir werden dies tun, indem wir ein einfaches Beispiel für "Job Leerstellen" durchlaufen. Sie finden die vollständigen Beispiele für jeden Fall in den Quellcode -Dateien oder in diesem GitHub -Repo. Fangen wir an!

Block und Erweiterung (Jade -Erbschaft)

Die Datei namens Layout.jade ist die Grundstruktur für das Layout unserer Seite, und dies ist eine Art trockenes Konzept, da Sie diese Tags für jede Seite nicht schreiben müssen. Stattdessen müssen Sie das Layout erweitern und den blockinhalten spezifischen Code schreiben, wie wir sehen werden.

Blöcke trennen oder organisieren das Layout. Es kann dann in einer anderen Datei überschrieben werden.

Hinweis: Der CSS und JavaScript -Code werden für Kürze und Fokus entfernt. Sie können diese im Repo finden. Außerdem habe ich die Kopie -Grunzenaufgabe zum Übertragen der JS- und Stilverzeichnisse aus dem App -Verzeichnis in das Build -Verzeichnis verwendet.

Hier ist die Layout.jade -Datei:

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

  body
    block content
    block footer
      include partials/footer.jade

Nach dem Login kopieren

Sie können Fußzeile und Head.jade entsprechend Ihren Bedürfnissen erstellen. Für unsere Seite werden wir Foundation und JQuery verwenden, um uns zu helfen, grundlegende Designs und Funktionen zu erstellen.

Hier ist die Partials/head.jade -Datei:

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")

Nach dem Login kopieren

Hier ist die Partials/footer.jade -Datei:

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

Nach dem Login kopieren

Im nächsten Snippet von Code werden wir Jobs.jade erstellen, die alle anderen Dateien verwendet, indem wir unser Layout mithilfe des Extends -Schlüsselworts erben und dann die von uns benötigten Blöcke überschreiben. In diesem Beispiel überschreiben wir den Inhaltsblock.

Jobs.jade:

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

  body
    block content
    block footer
      include partials/footer.jade

Nach dem Login kopieren

Aber was ist, wenn wir den gesamten Block nicht überschreiben müssen? Was ist, wenn wir stattdessen nur Inhalte hinzufügen müssen? Nehmen wir den Blockkopf als Beispiel. Wir müssen ein spezielles Skript für diese Seite im Header hinzufügen, damit wir die Schlüsselwörter nach Block anhängen oder vorbereiten.

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")

Nach dem Login kopieren

Iterationen und Mixins

verwenden

Im vorherigen Abschnitt haben wir Job-Container.jade aufgenommen. In diesem Abschnitt werden wir uns mit dem Vorteil von Loops und Mixins befassen und wie wir sie in Jade verwenden können.

Hier ist die erste Version eines neuen Code -Snippets:

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")

Nach dem Login kopieren

Wie Sie sehen, verwenden wir mehrere normale Schleifenanweisungen wie die in der ersten Zeile - jeden Job in Jobs. Das Charakter wird für den abgelösten Code verwendet, der keine Ausgabe direkt hinzufügt.

Im vorherigen Code-Snippet gibt es redundante Code, der mit Mixins trocken werden kann, wie im folgenden Code:

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

Nach dem Login kopieren

Hier erstellen wir einen wiederverwendbaren Jade -Block mit der Mixin -Funktion. Mixins sind wie Methoden (oder Funktionen), die Namen haben und Argumente in ihrem inneren Code bewerten. Im obigen Beispiel haben wir einen Mixin namens SkillsBlock () erstellt.

Um dieses Mixin zu verwenden, schreiben wir einfach seinen Namen und übergeben die richtigen Parameterwerte, um den Mixinnamen mit einem Zeichen vorzulegen, um ihn als Mixin -Aufruf zu identifizieren.

Hinweis: Wie im obigen Code können wir Werte entweder nach =,! = Oder #{} bewerten. Aber seien Sie vorsichtig, wenn Sie verwenden!

JSON -Daten über Grunzen

übergeben

Nachdem wir unsere Umgebung festgelegt haben, lass uns ein paar großartige Dinge mit der Kombination von Grunn und Jade machen, indem wir JSON -Daten von einer JSON -Datei mit einer Grunzenaufgabe an Jade weitergeben.

Erstellen Sie zunächst die JSON -Dateidaten.json und füllen Sie sie mit Ihren gewünschten Daten aus.

Dann öffnen Sie Gruntfile.js und fügen Sie das Datenattribut zu den Optionen der JADE -Aufgabe wie folgt hinzu:

// append head can be used without block 'append head'
block append head 
  script.
    alert('Welcome to SitePoint')

Nach dem Login kopieren

Das Attribut von Jobs Data/Local (Daten, die an JADE -Vorlagen übergeben werden) werden an die Jadedateien übergeben, die in der Eigenschaft der Dateien identifiziert wurden und im Jade -Code verwendet werden können. Auf diese Weise können Sie leicht Textinhalte zu Webseiten hinzufügen.

Zuletzt können Sie sehen, wie die Seite aussieht, wenn Sie sich die Demo ansehen. Natürlich wird die Quelle zusammengestellt, sodass die Demo in diesem Fall von geringer Bedeutung ist. Ein Screenshot ist unten gezeigt.

Verwenden Sie Jade und Grunzen, um die HTML -Produktion zu beschleunigen

einpacken

Gründe für die Verwendung von Vorlagenmotoren können variieren, können jedoch als Produktivität, weniger Wiederholung und eine angenehmere Syntax eingestuft werden. Außerdem möchten Sie möglicherweise keinen Code in der Muttersprache schreiben, da er zu wiederholt, fehleranfällig ist oder dass Sie ihn einfach nicht mögen. Hier kommt eine Sprache wie Jade, die darauf abgestimmt ist, Ihren Code präzise und einfach zu halten, ins Spiel.

Jade hilft Ihnen beim Schreiben von Cleaner -Code, was es weniger mühsam macht, Ihren Job zu erledigen. Wir haben einige der Grundlagen und Tipps und Tricks mit Grunzen behandelt. Sie können mehr über Jade erfahren, die wir in diesem Tutorial nicht behandelt haben, sodass Sie die offizielle Dokumentation finden können.

häufig gestellte Fragen (FAQs) zur Verwendung von Jade und Grunzen, um die HTML -Produktion zu beschleunigen

Was ist Jade und warum sollte ich es für die HTML-Produktion verwenden? Es vereinfacht den Prozess des Schreibens von HTML, indem Sie sauberen, lesbaren Code schreiben, der leicht zu warten ist. Es unterstützt auch dynamischen Code, wiederverwendbare Blöcke und umfasst, was die HTML -Produktion erheblich beschleunigen kann. Automatisiert sich wiederholende Aufgaben wie Minifikation, Zusammenstellung, Unit -Tests und Linie. Bei Verwendung mit Jade kann GrunT den Prozess des Zusammenstellens von Jade -Vorlagen in HTML automatisieren, was auf lange Sicht viel Zeit und Aufwand sparen kann.

Wie installiere ich Jade und Grunzen? > Sowohl Jade als auch Grunzen können über NPM (Node Package Manager) installiert werden. Sie können JADE installieren, indem Sie 'NPM install jade -g' und grunzen, indem Sie "NPM installieren grunzen -cli -g" in Ihrem Terminal oder Eingabeaufforderung ausführen.

Es gibt mehrere Online -Tools, mit denen HTML in JADE umwandeln kann, wie z. B. html2jade.org und codbeautify.org. Wenn Sie HTML jedoch programmgesteuert in Jade konvertieren möchten, können Sie das Paket 'HTML2JADE' NPM verwenden. Für HTML -zu -JADE -Konvertierung sind einfach zu bedienen und benötigen keine Installation. Sie können Ihren HTML -Code schnell in die Jade -Syntax umwandeln, was sehr hilfreich sein kann, wenn Sie neu in Jade sind oder wenn Sie eine große Menge an HTML -Code haben, die konvertiert werden müssen.

Wie verwende ich das? HTML2JADE 'NPM -Paket für HTML -to -Jade -Konvertierung? Um HTML in Jade umzuwandeln, indem Sie "HTML2JADE yourfile.html" in Ihrem Terminal- oder Eingabeaufforderung ausführen. Dadurch wird das Jade -Äquivalent Ihres HTML -Code ausgegeben.

Kann ich Jade mit anderen Taskläufern wie Gulp verwenden? Für Gulp stehen Plugins zur Verfügung, mit denen Jade -Vorlagen in HTML kompiliert werden können, ähnlich wie Grunzen. Verwenden des Schlüsselworts 'einfügen', gefolgt vom Pfad zur Datei. Dies kann sehr nützlich sein, um häufige Elemente wie Header und Fußzeilen in mehrere Vorlagen aufzunehmen.

Kann ich JavaScript in meinen Jade -Vorlagen verwenden? Sie können das Zeichen '-' verwenden, um eine Zeile von JavaScript-Code in Ihren Jade-Vorlagen zu starten. Sie debuggen Fehler in Ihren Vorlagen. Wenn Sie GrunT verwenden, können Sie auch das Plugin „Grunzen-Contribib-Jade“ verwenden, das eine "Jade: Debug" -Aufaufgabe zum Debuggen von JADE-Vorlagen bietet.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Jade und Grunzen, um die HTML -Produktion zu beschleunigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!