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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 397 ۱۸ مرداد ۹۵

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

grund

در جلسات قبل در مورد پلاگین grunt-contrib-concat صحبت کردیم و با استفاده از اون فایلهای css و js رو بهم وصل کردیم. در این جلسه قصد داریم کار با پلاگین grunt-contrib-uglify رو به شما آموزش بدیم. این پلاگین کارش اینه که فایلهای js شما رو بگیره و اونا رو فشرده سازی کنه و خروجی رو به شما تحویل بده. این پلاگین برای فشرده سازی از ابزار UglifyJS2 استفاده میکنه. برای استفاده از این ابزار در ابتدا باید اون رو برای پروژه خودمون نصب کنیم. برای اینکار به صفحه مورد نظر در سایت npmjs میریم. cmd رو باز کرده و به مسیر پروزه برید. در ابتدا باید عبارت زیر رو درون cmd تایپ کنیم:

بعد از اون اینتر میزنیم و منتظر میمونیم:grunt install uglify

میبینید که این پلاگین در پروژه ما بدون ارور نصب شد و بصورت اتوماتیک درون پوشه node_modules قرار میگیره. فایل package.json هم بصورت اتوماتیک بروزرسانی شده:grunt install uglify 2

بعد از اون باید اون رو در فایل gruntfile.js لود و اضافه کنیم:

همینطور که آموزشها جلوتر میره، فایل gruntfile.js بزرگتر میشه و نمیشه همزمان از کل اون عکس گرفت. بنابراین از این به بعد فقط از قسمت مورد نظر عکس میگیرم. بصورت زیر:grunt install uglify 3

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

حالا باید کدهامون رو درون {} قرار بدیم. در اینجا میخایم سه تا کار درون وظیفه uglify بسازم بصورت زیر:

  • js1 : فایل js1.js رو بگیره و فشرده کنه و درون پوشه final یک فایل بنام js1.min.js بسازه و کدها رو درونش قرار بده
  • js2 : فایل js2.js رو بگیره و فشرده کنه و درون پوشه final یک فایل بنام js2.min.js بسازه و کدها رو درونش قرار بده
  • all : همه فایلهای js موجود در پوشه development رو بگیره و کدهای فشرده شده رو درون فایل all.min.js در مقصد پوشه final قرار بده

برای اینکار ابتدا باید بصورت زیر عمل کنیم:grunt create uglify task 2

درون هر کدوم از این وظائف یک ویژگی بنام files قرار میگیره و مسیر فایلهای ورودی و خروجی رو مشخص میکنه. مسیر فایل خروجی رو در ابتدا مشخص میکنیم و بعد از اون : میزاریم و بعد از اون هم درون آرایه، مسیر فایلهای ورودی رو مشخص میکنیم. انتهای کار بصورت زیر هست:grunt create uglify task 3

دیدید که مسیر فایلهای ورودی و خروجی رو مشخص کردیم. در جلسه بعد توضیحات رو جلو میبریم.

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

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram