Rumah >hujung hadapan web >tutorial css >Menggunakan Jade dan Grunt untuk mempercepat pengeluaran HTML
Menggunakan Jade dan Grunt untuk mempercepat pengeluaran HTML
- Christopher Nolanasal
- 2025-02-24 08:24:19244semak imbas
yang dikumpulkan ke dalam:
<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>
Menggunakan Jade, anda tidak perlu menulis tag penutup, yang membantu mengelakkan kesilapan yang berpotensi, seperti melupakan untuk menambah tag penutup atau kehilangan urutan yang betul. Mana -mana teks pada permulaan baris ditafsirkan sebagai tag. Anda perlu menggunakan lekukan yang betul untuk setiap tag.
Nota: Jika nama tag ditinggalkan, div akan dibuat sebagai tag lalai.
Untuk menambah atribut ke tag, letakkannya di dalam kurungan selepas nama tag dan ikuti nama = format nilai. Untuk memisahkan pelbagai atribut, gunakan koma. Di samping itu, kelas dan ID boleh ditulis dengan. dan # simbol masing -masing, seperti dalam contoh sebelumnya.
menggunakan watak paip (|)
Kadang -kadang kita perlu menulis kandungan mentah tag pada baris baru tetapi, seperti yang saya sebutkan tadi, mana -mana teks pada permulaan baris dianggap sebagai tag . Untuk mengelakkan ini, gunakan paip atau | watak pada permulaan baris dan tulis teks dalaman untuk tag pada baris baru.
Nota: Untuk melihat perubahan yang anda buat dalam fail Jade dengan menyusunnya, anda perlu menjalankan Grunt berdasarkan tugas yang kami buat sebelum ini.
Ciri -ciri Jade yang kuat dengan Grunt
Di bahagian sebelumnya, saya memberi anda gambaran ringkas mengenai sintaks Jade. Dalam bahagian berikut, kami akan meneruskan beberapa ciri jed yang biasa dan kuat, bersama -sama dengan beberapa yang lebih maju. Kami akan melakukan ini dengan melalui sampel "kekosongan jawatan pekerjaan" yang mudah. Anda boleh mencari contoh penuh untuk setiap kes dalam fail kod sumber atau dari repo github ini. Mari kita mulakan!
blok dan lanjutkan (warisan jed)
Fail yang dipanggil Layout.jade akan menjadi struktur asas untuk susun atur halaman kami, dan ini adalah sejenis konsep kering, kerana anda tidak perlu menulis tag ini untuk setiap halaman. Sebaliknya anda perlu melanjutkan susun atur dan mula menulis kod khusus kandungan blok, seperti yang akan kita lihat.
Blok jenis memisahkan atau menganjurkan susun atur. Ia kemudian boleh ditimpa dalam fail lain.
Nota: Kod CSS dan JavaScript dikeluarkan untuk keringkasan dan fokus. Anda boleh mencari ini dalam repo. Juga, saya telah menggunakan tugas salinan salinan untuk memindahkan direktori JS dan gaya dari direktori aplikasi ke direktori Build.
inilah fail susun atur.jade:
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade
anda boleh membuat footer.jade dan head.jade mengikut keperluan anda. Untuk halaman kami, kami akan menggunakan asas dan jQuery untuk membantu kami menubuhkan beberapa reka bentuk dan fungsi asas.
inilah fail partial/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")
inilah fail partial/footer.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>
Dalam coretan kod seterusnya, kami akan membuat pekerjaan. Dalam contoh ini, kami menulis ganti blok kandungan.
jobs.jade:
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade
Tetapi bagaimana jika kita tidak perlu menimpa seluruh blok? Bagaimana jika kita hanya perlu menambah kandungan? Mari kita ambil kepala blok sebagai contoh. Kami perlu menambah skrip khas untuk halaman ini di tajuk, jadi kami akan menggunakan kata kunci tambahan atau prepend selepas blok.
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")
Menggunakan lelaran dan mixins
Di bahagian sebelumnya, kami termasuk pekerjaan-container.jade. Dalam bahagian ini, kita akan melihat manfaat gelung dan campuran dan bagaimana kita boleh menggunakannya di Jade.
Berikut adalah versi awal coretan kod baru:
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")
Seperti yang anda lihat, kami menggunakan beberapa pernyataan gelung biasa seperti yang ada pada baris pertama - setiap pekerjaan dalam pekerjaan. Karakter - digunakan untuk kod yang tidak dibebankan yang tidak menambah output secara langsung.
Dalam coretan kod terdahulu, terdapat kod berlebihan yang boleh menjadi kering menggunakan mixins, seperti dalam kod berikut:
extends layout.jade
block content
div#container.row
div.small-12.large-12.columns
include job-container.jade
Di sini kita membuat blok Jade yang boleh digunakan semula menggunakan ciri Mixin. Mixins adalah seperti kaedah (atau fungsi) yang mempunyai nama dan mengambil argumen untuk menilai dalam kod dalaman mereka. Dalam contoh di atas, kami mencipta mixin yang dipanggil SkillsBlock ().
Untuk menggunakan mixin ini, kami hanya menulis namanya dan lulus nilai parameter yang betul, mengutamakan nama mixin dengan tanda untuk mengenalinya sebagai panggilan mixin.
Nota: Seperti dalam kod di atas, kita boleh menilai nilai sama ada dengan =,! = Atau #{}. Tetapi berhati -hati apabila anda menggunakan! =, Yang tidak melakukan apa -apa melarikan diri, jadi tidak selamat untuk input pengguna.
Lulus data JSON melalui Grunt
Setelah menubuhkan persekitaran kita, mari kita lakukan beberapa perkara yang hebat dengan gabungan Grunt dan Jade dengan meluluskan data JSON dari fail JSON ke Jade menggunakan tugas mengerang.
Pada mulanya, buat data fail JSON.json, dan isi dengan data yang anda inginkan.
kemudian buka gruntfile.js dan tambahkan atribut data kepada pilihan tugas Jade, seperti berikut:
// append head can be used without block 'append head'
block append head
script.
alert('Welcome to SitePoint')
Data pekerjaan/penduduk tempatan (data yang dihantar ke templat jed dipanggil penduduk tempatan) atribut akan dihantar ke fail Jade yang dikenal pasti dalam harta fail dan boleh digunakan dalam kod Jade. Cara ini memberi anda keupayaan untuk menambah kandungan teks ke laman web dengan mudah.
Akhir sekali, anda dapat melihat bagaimana halaman kelihatan jika anda menyemak demo. Sudah tentu, sumbernya disusun supaya demo tidak begitu penting dalam kes ini. Tangkapan skrin ditunjukkan di bawah.
membungkus
Alasan menggunakan enjin templat mungkin berbeza -beza, tetapi mereka boleh dikategorikan sebagai lebih banyak produktiviti, kurang pengulangan, dan mempunyai sintaks yang lebih menyenangkan. Juga, anda mungkin tidak mahu menulis kod dalam bahasa ibunda kerana ia terlalu berulang, rawan ralat, atau mungkin anda tidak menyukainya. Di sinilah bahasa seperti Jade, disesuaikan untuk menyimpan kod anda ringkas dan mudah, dimainkan.
Jade membantu anda menulis kod bersih, yang menjadikannya kurang membosankan untuk melakukan tugas anda. Kami telah meliputi beberapa asas dan tips dan trik menggunakan Grunt. Lebih banyak lagi yang anda boleh belajar tentang Jade yang tidak kami tutupi dalam tutorial ini, jadi anda boleh menyemak dokumentasi rasmi untuk lebih.
Soalan Lazim (Soalan Lazim) Mengenai Menggunakan Jade dan Grunt Untuk Mempercepat Pengeluaran HTML
Apa itu Jade dan mengapa saya harus menggunakannya untuk pengeluaran HTML? Ia memudahkan proses menulis HTML dengan membolehkan anda menulis kod yang bersih dan mudah dibaca yang mudah dijaga. Ia juga menyokong kod dinamik, blok yang boleh diguna semula, dan termasuk, yang boleh mempercepatkan pengeluaran HTML dengan ketara. Automasi tugas berulang seperti minifikasi, penyusunan, ujian unit, dan linting. Apabila digunakan dengan Jade, Grunt boleh mengautomasikan proses menyusun templat jed ke HTML, yang dapat menjimatkan banyak masa dan usaha dalam jangka masa panjang. > Kedua -dua Jade dan Grunt boleh dipasang melalui NPM (Pengurus Pakej Node). Anda boleh memasang Jade dengan menjalankan 'NPM Install Jade -g' dan Grunt dengan menjalankan 'NPM Pasang Grunt -cli -G' di terminal atau arahan arahan anda.
Terdapat beberapa alat dalam talian yang boleh menukar HTML ke Jade, seperti html2jade.org dan codebeautify.org. Walau bagaimanapun, jika anda ingin menukar HTML ke Jade secara programatik, anda boleh menggunakan pakej NPM 'HTML2JADE'. Untuk HTML untuk penukaran jed mudah digunakan dan tidak memerlukan sebarang pemasangan. Mereka dengan cepat boleh menukar kod HTML anda ke sintaks jed, yang boleh sangat membantu jika anda baru untuk jed atau jika anda mempunyai banyak kod HTML yang perlu ditukar. pakej npm html2jade untuk penukaran html ke jed?Setelah memasang pakej 'html2jade' melalui npm, anda boleh menggunakannya Tukar html ke jade dengan menjalankan 'html2jade yourfile.html' di terminal atau command prompt anda. Ini akan mengeluarkan setara Jade kod HTML anda.
Bolehkah saya menggunakan Jade dengan pelari tugas lain seperti Gulp?
Ya, Jade boleh digunakan dengan pelari tugas lain seperti Gulp. Terdapat plugin yang tersedia untuk Gulp yang boleh menyusun templat Jade ke HTML, sama dengan Grunt. Menggunakan kata kunci 'termasuk' yang diikuti oleh laluan ke fail. Ini boleh menjadi sangat berguna untuk memasukkan unsur -unsur biasa seperti tajuk dan footer dalam pelbagai templat. Anda boleh menggunakan watak '-' untuk memulakan baris kod JavaScript dalam templat jade anda.
Bagaimana saya boleh debug ralat dalam templat jade saya? Anda debug kesilapan dalam templat anda. Sekiranya anda menggunakan Grunt, anda juga boleh menggunakan plugin 'Grunt-Contrib-Jade' yang menyediakan tugas 'Jade: Debug' untuk debugging jade template.
Atas ialah kandungan terperinci Menggunakan Jade dan Grunt untuk mempercepat pengeluaran HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!