سه شنبه , آبان ۱ ۱۳۹۷
خانه / مقالات / برنامه نویسی / web developer / Front End / استفاده از pug در Angular
استفاده از pug در Angular

استفاده از pug در Angular

(Pug (Jade)  و  Angular به کمک CLI.

استفاده از pug در Angular -برای تعریف میتوان گفت : pug یک تمپلییت انجین  قدرتمند مشابه haml و پیاده سازی شده بوسیله زبان  javascript برای nodejs که به جهت تسریع قالب نویسی و خوانایی سمت کلاینت مورد استفاده قرار می گیرد.

به تکه کد html زیر دقت کنید.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my portal</title>
  </head>
  <body>
    <app-root>
      <div class="root-spinner">
        <img class="loading" src="assets/images/logo.png">
      </div>
    </app-root>
  </body>
</html>

بوسیله  pug کدهای شما بصورت زیر خواهند بود

doctype html
html
  head
    meta(charset="utf-8")
    title my portal
  body
    app-root
      div.root-spinner
      img.loading(src="assets/images/logo.png")

حال چطور می شود pug را در پروژه انگولاری خود پیاده سازی کرد.

قبل از هرچیز شما باید pug-cli را بصورت سراسری در سیستم عامل خود نصب کنید. برای این منظور از تکه کد زیر استفاده کنید.

npm install pug-cli --save-dev

سپس وارد پروژه انگولاری خود شده و در فایل package.json قسمت scripts  دستورات زیر را اضافه کنید.

"pug-it": "pug src",
"pug-it:w": "pug src -P -w"

تقریبا کار تمام است حال شما با وارد کردن دستور pug-it میتوانید تمامی فایل pug که در پوشه src پروژه قرار گرفته است را کامپایل کرده و به html تبدیل کنید. دستور pug-it:w نیز بصورت watch منتظر تغییرات بصورت بلادرنگ هر تغییر شما را به html تبدیل می کند.

گزینه بهتری که برای کامپایل کردن فایل های pug در پروژه انگولاری وجود دارد تعریف کامپایلر pug در npm-start است به این منظور دستورات زیر را به فایل  package.json  خود اضافه کنید.

"ng": "ng",
"start": "run-p pug-it:w server",
"server": "ng serve --port 4210",
"prebuild": "yarn run pug-it",
"build": "ng build",

حال کافیست دستور npm start را اجرا کنید. موفق باشید

 

استفاده از pug در Angular

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

۲ کامنت ها

  1. سلام
    ممنون از معرفی خوبتون
    فقط سینتکس pug به نظر کمی غیر عادی میاد, ما همیشه عادت داریم دستور انتهایی رو هم داشته باشیم مثلا تگ بستن اما اینجا انگار چنین چیزی نیست و سوال اینجاست چطور کامپایلر این رو تشخیص میده ؟ و آیا اصلا نیاز به تشخیص داره ؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.