Maison >interface Web >tutoriel CSS >Utiliser Jade et Grunt pour accélérer la production HTML
Utiliser Jade et Grunt pour accélérer la production HTML
- Christopher Nolanoriginal
- 2025-02-24 08:24:19244parcourir
qui compile en:
<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>
En utilisant Jade, vous n'avez pas à écrire des balises de fermeture, ce qui aide à éviter les erreurs potentielles, comme oublier d'ajouter des balises de clôture ou de perdre leur ordre correct. Tout texte au début d'une ligne est interprété comme une balise. Vous devez utiliser une indentation appropriée pour chaque balise.
Remarque: Si le nom de balise est omis, une div sera créée en tant que balise par défaut.
Pour ajouter des attributs à une balise, placez-les à l'intérieur des parenthèses après le nom de la balise et suivez le format Nom = Valeur. Pour séparer plusieurs attributs, utilisez une virgule. De plus, les classes et les identifiants peuvent être écrits avec. et # symboles respectivement, comme dans l'exemple précédent.
en utilisant le caractère de tuyau (|)
Parfois, nous devons écrire le contenu brut d'une balise sur une nouvelle ligne mais, comme je l'ai mentionné plus tôt, tout texte au début d'une ligne est considéré comme une balise . Pour éviter cela, utilisez le tuyau ou | caractère au début de la ligne et écrivez le texte intérieur de la balise sur la nouvelle ligne.
Remarque: Afin de voir les modifications que vous avez apportées dans le fichier Jade en la compilant, vous devez exécuter un grognement en fonction de la tâche de grognement que nous avons créée auparavant.
Fonctionnalités de jade puissantes avec grogn
Dans la section précédente, je vous ai donné un aperçu rapide de la syntaxe de Jade. Dans les sections suivantes, nous passerons en revue d'autres fonctionnalités de Jade communes et puissantes, ainsi que quelques plus avancées. Nous le ferons en passant par un simple échantillon de «page de postes vacants». Vous pouvez trouver les exemples complets pour chaque cas dans les fichiers de code source ou à partir de ce dépôt GitHub. Commençons!
Bloquer et étendre (héritage de jade)
Le fichier appelé Layout.jade sera la structure de base de la disposition de notre page, et c'est une sorte de concept sec, car vous n'avez pas besoin d'écrire ces balises pour chaque page. Au lieu de cela, vous devez étendre la mise en page et commencer à écrire le code spécifique du contenu du bloc, comme nous le verrons.
Les blocssont en quelque sorte séparés ou organisation de la disposition. Il peut alors être écrasé dans un autre fichier.
Remarque: le code CSS et JavaScript est supprimé par la brièveté et la mise au point. Vous pouvez les trouver dans le dépôt. De plus, j'ai utilisé la tâche de grog de copie pour transférer les répertoires JS et Style du répertoire de l'application vers le répertoire de construction.
Voici le fichier Layout.Jade:
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade
Vous pouvez créer un pied de page.jade et head.jade en fonction de vos besoins. Pour notre page, nous utiliserons Foundation et JQuery pour nous aider à établir une conception et une fonctionnalité de base.
Voici le fichier partiels / head.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")
voici le fichier partiels / footter.jade:
<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>
Dans l'extrait de code suivant, nous créerons Jobs.Jade, qui utilise tous les autres fichiers en héritant de notre mise en page en utilisant le mot clé EXTENSE, puis en écrasant les blocs dont nous avons besoin. Dans cet exemple, nous écrasons le bloc de contenu.
jobs.jade:
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade
Mais que se passe-t-il si nous n'avons pas besoin de remplacer l'ensemble du bloc? Et si nous avons juste besoin d'ajouter du contenu à la place? Prenons l'exemple de la tête du bloc. Nous devons ajouter un script spécial pour cette page dans l'en-tête, nous utiliserons donc les mots clés de l'ajout ou de la pré-allonge après le bloc.
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")
en utilisant les itérations et les mixins
Dans la section précédente, nous avons inclus l'emploi-container.jade. Dans cette section, nous examinerons les avantages des boucles et des mixins et comment nous pouvons les utiliser dans Jade.
Voici la version initiale d'un nouvel extrait de code:
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")
Comme vous le voyez, nous utilisons plusieurs instructions de boucle normale comme celle de la première ligne - chaque travail dans les travaux. Le caractère - est utilisé pour le code non frappé qui n'ajoute aucune sortie directement.
Dans l'extrait de code précédent, il y a du code redondant qui peut devenir sèche à l'aide de mixins, comme dans le code suivant:
extends layout.jade
block content
div#container.row
div.small-12.large-12.columns
include job-container.jade
Ici, nous créons un bloc de jade réutilisable à l'aide de la fonction de mixin. Les mixins sont comme des méthodes (ou des fonctions) qui ont des noms et prennent des arguments à évaluer dans leur code intérieur. Dans l'exemple ci-dessus, nous avons créé un mixin appelé SkillsBlock ().
Pour utiliser ce mixin, nous écrivons simplement son nom et passons les valeurs des paramètres appropriés, préfixant le nom de mixin avec un signe pour l'identifier comme un appel de mixin.
Remarque: Comme dans le code ci-dessus, nous pouvons évaluer les valeurs soit par =,! = Ou # {}. Mais soyez prudent lorsque vous utilisez! =, Ce qui ne fait aucune échappement, donc n'est pas sûr pour la saisie des utilisateurs.
passer des données JSON par grogn
Après avoir établi notre environnement, faisons des choses impressionnantes avec la combinaison de grognement et de jade en passant les données JSON d'un fichier JSON à Jade en utilisant une tâche grogn.
Au début, créez le fichier JSON Data.json et remplissez-les avec les données souhaitées.
puis ouvrez gruntfile.js et ajoutez l'attribut de données aux options de la tâche de jade, comme suit:
// append head can be used without block 'append head'
block append head
script.
alert('Welcome to SitePoint')
L'attribut de données / locaux (données transmises aux modèles Jade est appelée locaux) sera transmise aux fichiers Jade identifiés dans la propriété des fichiers et peut être utilisé dans le code Jade. Cette manière vous donne la possibilité d'ajouter facilement du contenu texte aux pages Web.
Enfin, vous pouvez voir à quoi ressemble la page si vous consultez la démo. Bien sûr, la source est compilée afin que la démo soit de peu importante dans ce cas. Une capture d'écran est présentée ci-dessous.
Envelopper
Les raisons d'utiliser des moteurs de modèle peuvent varier, mais elles peuvent être classées comme plus de productivité, moins de répétition et avoir une syntaxe plus agréable. De plus, vous ne voudrez peut-être pas écrire de code dans la langue maternelle car il est trop répétitif, sujet aux erreurs, ou peut-être que vous ne l'aimez tout simplement pas. C'est là qu'une langue comme Jade, réglée pour garder votre code concis et simple, entre en jeu.
Jade vous aide à écrire du code plus propre, ce qui rend moins fastidieux pour faire votre travail. Nous avons couvert certaines des bases, des conseils et des astuces en utilisant un grognement. Il y a plus que vous pouvez en savoir plus sur Jade que nous n'avons pas couvert dans ce tutoriel, vous pouvez donc consulter la documentation officielle pour en savoir plus.
Les questions fréquemment posées (FAQ) sur l'utilisation de Jade et Grunt pour accélérer la production HTML
Qu'est-ce que Jade et pourquoi dois-je l'utiliser pour la production HTML?
Jade, maintenant connu sous le nom de PUG, est un moteur de modèle haute performance fortement influencé par HAML et implémenté avec JavaScript pour Node.js. Il simplifie le processus d'écriture de HTML en vous permettant d'écrire un code propre et lisible qui est facile à entretenir. Il prend également en charge le code dynamique, les blocs réutilisables et comprend, ce qui peut considérablement accélérer la production de HTML.
Comment le grognement complète-t-il le jade pour accélérer la production de HTML?
Grunt est un coureur de tâche JavaScript que le coureur de tâche JavaScript qui a censé Automatise les tâches répétitives comme la minification, la compilation, les tests unitaires et la libellée. Lorsqu'il est utilisé avec Jade, Grunt peut automatiser le processus de compilation de modèles de jade en HTML, ce qui peut économiser beaucoup de temps et d'efforts à long terme.
Comment installer Jade et Grunt?
Jade et Grunt peuvent être installés via NPM (Node Package Manager). Vous pouvez installer Jade en exécutant 'npm install jade -g' et grunt en exécutant 'npm installer grunt-cli -g' dans votre terminal ou votre invite de commande.
Comment convertir HTML en jade?
Il existe plusieurs outils en ligne disponibles qui peuvent convertir HTML en Jade, tels que html2jade.org et codeBeUtify.org. Cependant, si vous souhaitez convertir HTML en Jade par programme, vous pouvez utiliser le package npm 'html2jade'.
Quels sont les avantages de l'utilisation d'outils en ligne pour la conversion HTML pour Jade?
Outils en ligne des outils en ligne Pour que la conversion HTML à Jade est facile à utiliser et ne nécessite aucune installation. Ils peuvent rapidement convertir votre code HTML en syntaxe Jade, ce qui peut être très utile si vous êtes nouveau dans Jade ou si vous avez une grande quantité de code HTML qui doit être converti.
Comment utiliser le ' Html2jade 'Package NPM pour la conversion HTML à Jade?
Après avoir installé le package' html2jade 'via NPM, vous pouvez utiliser Il pour convertir HTML en Jade en exécutant «html2jade yourfile.html» dans votre terminal ou votre invite de commande. Cela sortira l'équivalent Jade de votre code HTML.
Puis-je utiliser Jade avec d'autres coureurs de tâches comme Gulp?
Oui, Jade peut être utilisé avec d'autres coureurs de tâche comme Gulp. Il existe des plugins disponibles pour Gulp qui peuvent compiler les modèles de jade en HTML, similaire à Grunt.
Comment inclure des fichiers externes dans mes modèles de jade?
Vous pouvez inclure des fichiers externes dans vos modèles Jade Utilisation du mot-clé «inclure» suivi du chemin d'accès au fichier. Cela peut être très utile pour inclure des éléments communs comme les en-têtes et les pieds de page dans plusieurs modèles.
Puis-je utiliser JavaScript dans mes modèles de jade?
Oui, Jade prend en charge JavaScript en ligne. Vous pouvez utiliser le caractère '-' pour démarrer une ligne de code JavaScript dans vos modèles de jade.
Comment déboguer les erreurs dans mes modèles de jade?
Jade fournit des messages d'erreur détaillés qui peuvent aider à aider Vous déboguez des erreurs dans vos modèles. Si vous utilisez Grunt, vous pouvez également utiliser le plugin «Grunt-Contrib-Jade» qui fournit une tâche «Jade: Debug» pour déboguer les modèles de jade.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!