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

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



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

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 17) - فشرده سازی فایلهای javascript - قسمت 2

0 411 ۱۹ مرداد ۹۵

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

grund

در جلسه قبل دیدید که توضیحاتی در مورد grunt-contrib-uglify دادیم و شما رو با اون آشنا کردیم. تا اینجای کار به تصویر زیر رسیدیم:grunt create uglify task 3

حالا که وظیفه خودمون رو ساختیم، باید همانند پلاگین قبلی به grunt بگیم که اون رو بصورت پیش فرض اجرا کن. برای اینکار بصورت زیر عمل میکنیم:grunt create uglify task 4

میبینید که وظیفه uglify رو نیز همانند concat به آرایه موجود اضافه کردیم. کدهای کامل gruntfile.js بصورت زیر هست:

حالا اگه cmd رو باز کنید و به مسیر پروژه برید و grunt رو اجرا کنید...واو!! همه کارها به یکباره با هم انجام میشه و فایلهای مورد نظر ساخته میشه:grunt run task

حالا اگه درون پوشه js موجود در پوشه final نگاه کنید میبینید که علاوه بر final.js که مربوط به قبل هست، فایلهای زیر نیز ساخته شده:grunt run task 2

اگه یادتون باشه فایل js1.js بصورت زیر بود:

بعد از اینکه اون رو فشرده کردیم و کدهاشو درون js1.min.js ریختیم بصورت زیر میشه:

بهمین راحتی.

تا اینجای کار مقدمات انجام شده و تقریبا کار تمومه ولی چند نکته و ویژگی هست که گفتشون میتونه سودمند باشه. همونطور که دیدید در بالا برای وظیفه all من از * استفاده کردم. زمانی که مثلا میگم *.js به معنای اینه که تمام فایلهای با پسوند js رو انتخاب کن. اگر مثلا بنویسیم development/**/*.js باعث میشه که همه فایلهای js درون همه فولدرهای موجود در development رو انتخاب کنه. پس * برای همه انتخاب همه فایلها و ** برای انتخاب همه پوشه ها بکار میره.

همانند وظیفه concat شما میتونین برای uglify هم ویژگی options قرار بدین و از اون پیشرفته تر استفاده کنید و تنظیمات اون رو متناسب با نیاز خودتون تغییر بدین. برای اینکار بصورت زیر عمل میکنیم:grunt options for uglify

همانند concat میتونین از ویژگی های footer و banner استفاده کنید. ابتدا بیاید کدهای درون js1.js رو بصورت زیر عوض کنیم تا بیشتر متوجه بشید:

حالا اگه مجددا grunt رو اجرا کنیم و فایل js1.min.js ببینیم، بصورت زیر هست:

میبینید که همه کامنتا از بین رفته و همچنین اسم بعضی از متغیرها هم عوض شده. برای اینکه اسم متغیرها تغییر نکنه میتونین از ویژگی mangle استفاده کنید و اون رو false بزارید:grunt options for uglify 2

اگر دوباره grunt رو اجرا کنید و خروجی رو ببینید بصورت زیر هست:

میبینید که دیگه اسم متغیرها عوض نشده.

ویژگی دیگه ای بنظرم باید در مورد اون صحبت بشه اینه که چطور برای فایل فشرده شدمون یک فایل map درست کنیم. برای اینکار بصورت زیر عمل میکنیم. در ابتدا بگم که فقط میخام برای وظیفه all اینکارو انجام بدم. اگر درون options موجود ویژگی رو اضافه کنم، همه کارهای زیرمجموعه ی اون، اون تنظیمات رو دریافت میکنن ولی اگه بخوایم فقط به یکی از اونا اعمال بشه، میشه درون اون یک ویژگی options دیگه ساخت که فقط مختص خودش باشه. بنابراین من یک ویژگی options درون وظیفه all قرار میدم. بصورت زیر:grunt options for uglify 3

دیدید که ویژگی sourceMap رو برابر با true قرار دادیم و نام و مسیر قرارگیری اون رو هم مشخص کردیم. اگر حالا دوباره grunt رو اجرا کنیم یک فایل جدید ساخته میشه و کدهای زیر درونش قرار میگیره:

شاید با کاربرد فایل با فرمت map آشنا نباشید. بیشتر ابزارها مثل bootstrap و jquery و ... در کنار فایل فشردشون این فایل هم قرار داره. از این فایل برای debug کردن فایلهایی که minify شده هستن استفاده میشه. برای مطالعه بیشتر میتونین به این لینک برید. وقتی که این کار رو میکنید، اگه فایل all.min.js رو باز کنید، در خط آخر اون به این sourceMap اشاره کرده است:grunt options for uglify 4

اینم از پلاگین grunt-contrib-uglify.

شما میتونین برای مطالعه بیشتر در مورد این پلاگین به این لینک مراجعه کنید. خسته نباشید.

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

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram