آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 23) - تبدیل کدهای pug به html

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-contrib-pug صحبت کنیم و با استفاده از اون کدهای pug یا Jade خودمون رو به کدهای html تبدیل کنیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

بعد از اینکار اینتر میزنیم:grunt install pug

من از این به بعد بجای cmd خود سیستم از cmder استفاده میکنم. هیچ فرقی بین اونا نیس و شما میتونین هر کاری که من اینجا میکنم توی cmd انجام بدین و نتیجه مشابه بگیرید.

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install pug 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install pug 3

حالا باید یک وظیفه بنام pug بسازیم:

دیدید که بعد از task هایی که قبلا ساخته بودیم، وظیفه pug رو هم ساختیم.

قبل از اینکه تنظیمات درون pug رو قرار بدیم، یک فایل بنام template.pug رو درون پوشه pug موجود در پوشه development بسازید. درون فایل template.pug کدهای زیر رو قرار بدین:

دیدید که درون این فایل مورد نظر مقداری کد pug قرار داده شده. حالا میخایم این فایلها رو به html تبدیل کنیم. خروجی رو میخایم درون پوشه html موجود در پوشه final بنام template.html دخیره کنیم.

حالا میتونیم تنظیمات مورد نظرمون رو درون اون قرار بدیم، برای اینکار بصورت زیر عمل میکنیم:grunt pug compile

میبینید که یک وظیفه بنام compile درون pug ساختیم و درون اون دو ویژگی options و files رو قرار دادیم. درون options فعلا مقدار debug رو برابر با false قرار دادیم تا فایل دیگه ای نسازه. درون files هم فایل و مسیر ورودی و خروجی رو مشخص کردیم. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، pug رو به آرایه آخر اضافه میکنیم:grunt pug compile 2

حالا اگر grunt رو اجرا کنیم، همه کارهایی که مشخص کردیم تو یه چشم به هم زدن انجام میشن و فایلهای مورد نظر ساخته میشن.grunt pug compile 3

یک فایل بنام template.pug ساخته میشه. من تمام فایلها رو بصورت یک پروژه در آوردم و در سایت Github قرار میدم و با هر آموزش اون رو Update میکنم. شما میتونین برای دیدن این فایلها و بقیه موارد به صفحه Github این آموزش به نام 7learn-grunt برید. اگر فایل template.html رو باز کنید میبینید که کدهای HTML ساخته شدن و فرآیند با موفقیت انجام شده:

بهمین راحتی میتونیم با کدهای Jade یا Pug کار کنیم. برای مطالعه بیشتر به این لینک سر بزنید.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.