آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 19) - تبدیل کدهای Coffee به Javascript

- visibility ۰ mode_comment

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

grund

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

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

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

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

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

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

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

دیدید که درون این فایل مقداری کد coffeeScript قرار داده شده. حالا میخایم این فایل رو به Javascript تبدیل کنیم. خروجی رو میخایم درون js موجود در پوشه final بنام coffee.js دخیره کنیم.

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

میبینید که درون coffee یک وظیفه بنام compile ساختیم و کارش اینه که فایل coffee.coffee رو تبدیل به coffee.js کنه. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، coffee رو به آرایه آخر اضافه میکنیم:grunt coffee config 2

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

یک فایل بنام coffee.js ساخته میشه و اگر اون رو باز کنیم، بصورت زیر خواهد بود:

میبینید که کدهای coffee به javascript تبدیل شدن و کامنتها هم حذف شدن. همچنین شما میتونین چندین فایل coffee رو همزمان تبدیل کرده و اونا رو به هم بچسبونید. همانند گذشته میتونین از separator و sourceMap استفاده کنید. فرض کنید بخایم یک sourceMap برای این فایل درست کنیم. برای انجام کارهای گفته شده، ویژگی options رو درون coffee بصورت زیر قرار میدیم:grunt coffee config 4

حالا اگر grunt رو مجددا اجرا کنیم، علاوه بر تبدیل کردن به javascript یک فایل map هم در اختیارمون قرار میگیره و کاربرد اون رو هم قبلا توضیح دادم. فایل coffee.js دارای کدهای زیر هست:

در خط آخر به sourceMap اون اشاره کرده. محتوای sourceMap هم بصورت زیر هست:

این ابزار یک ویژگی دیگه بنام bare داره که با true قرار دادن اون کدهای خروجی دیگه در یک function کلی قرار داده نمیشن. اگر کدهای خروجی در حالت قبل رو دیده باشید همه کدها درون یک function کلی قرار داده شدن. حالا شما میتونین با استفاده از این ویژگی این امکان رو غیرفعال کنید. برای اینکار بصورت زیر عمل میکنیم:grunt coffee config 5اگر grunt رو اجرا کنیم و خروجی رو ببینیم بصورت زیر خواهد بود:

میبینید که دیگه درون یک function کلی قرار داده نشده. برای مطالعه بیشتر در مورد این ابزار میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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