آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 15) - اتصال فایلها به یکدیگر - قسمت 3

ساخت وبلاگ
0 68 ۱۷ مرداد ۹۵

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

grund

در جلسه قبل توضیحاتی در مورد پلاگین grunt-contrib-concat دادیم و فایلهای css و js رو بهم دیگه متصل کردیم و خروجی گرفتیم. در این جلسه میخایم تعدادی ترفند پیشرفته برای استفاده از این پلاگین بهتون بگیم و در جلسه بعدی بریم سراغ پلاگین بعدی.

فرض کنید زمانی که داریم چنتا فایل رو با هم دیگه ترکیب میکنیم، بخایم در خروجی در لابلای هر کدام از فایلها یک جداکننده قرار بگیره و مشخص کنه که از اینجا به بعد کدهای فایل بعدی قرار گرفته. برای اینکار باید درون وظیفه concat که ساختیم یک ویژگی بنام options اضافه کنیم و تنظیمات اضافه خودمون رو درونش قرار بدیم. بصورت زیر:

برای قرار دادن جداکننده باید از ویژگی separator استفاده کنید و رشته مورد نظر خودتون رو درون اون قرار بدین. بصورت زیر:

میبینید که یک کامنتی رو قرار دادیم و قبل و بعد از اون دو تا n قرار دادیم تا از خطوط قبلی و بعدی خودش فاصله بگیره. حالا اگر در cmd کلمه grunt رو بنویسیم و اینتر بزنیم، هم در فایل خروجی css و هم در js کامنت مورد نظر بعنوان جداکننده قرار گرفته. فایل css خروجی:

فایل js خروجی:

خب این از اولین ویژگی.

ما میتونیم با استفاده از ویژگی banner در ابتدای فایل خروجی رشته ای رو قرار بدیم. اگه یادتون باشه قبلا گفته بودیم که با استفاده از ویژگی pkg، فایل package.json رو میخونیم و میتونیم از اون درون Grunt استفاده کنیم. حالا میخایم این کارو انجام بدیم. در اینجا میخایم در بالای فایلهای css و js خروجی نام پروژه، نسخه پروژه و همجنین تاریخ ایجاد فایل رو درون کامنت قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که ویژگی banner بصورت زیر اضافه شده:

این ویژگی رشته ای رو میگیره و در خروجی، در ابتدای فایل قرار میده. همونطور که دیدید برای استفاده از pkg و خواندن ویژگی name اون از عبارت <%= pkg.name %> استفاده شده. همچنین برای قرار دادن version از عبارت <%= pkg.version %> استفاده شده. با این کار ویژگی های name و version از فایل package.json خوانده میشه و قرار میگیره.

در انتها نیز عبارت <%= grunt.template.today("yyyy-mm-dd") %> قرار گرفته و همونطور که میبینید در ابتدا یک قالب و template برای نمایش تاریخ مشخص کرده و با استفاده از متد grunt.template.today تاریخ امروز رو با فرمت مورد نظر نمایش میده. حالا اگر grunt رو اجرا کنیم و خروجی فایلها رو ببینیم، بصورت زیر خواهند بود. بعنوان مثال فایل css بصورت زیر هست:

میبینید که در خط اول متن مورد نظر قرار گرفته.

ویژگی بعدی که میخایم استفاده کنیم footer هست و کار این ویژگی اینه که یک متن و رشته رو به انتهای فایلهای خروجی اضافه میکنه. بعنوان مثال کد زیر رو در نظر بگیرید:

میبینید که برای ویژگی footer عبارت pkg.author رو قرار دادم و با اینکار در انتهای فایل خروجی اسم نویسنده پروژه که در فایل package.json قرار داره رو اضافه میکنه. با اجرا کردن grunt در cmd خروجی فایل js بصورت زیر میشه:

میبینید که چه راحت میتونید از ویژگی های banner و footer و separator استفاده و کدهاتون رو مدیریت کنید.

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

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

موفق باشید

یا علی

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 319 تاريخ : دوشنبه 18 مرداد 1395 ساعت: 17:25

خبرنامه