illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 337 ۱۷ مرداد ۹۵

در این مطلب با ادامه آموزش 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 صحبت میکنیم.

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram