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

- visibility ۰ mode_comment

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

grund

حالا باید یک سری تغییر در وظیفه watch که در جلسه قبل ساختیم، ایجاد کنیم. در ابتدا باید یک options به اون اضافه کنیم و بگیم که میخایم بصورت زنده اون رو رفرش و reload کنیم:grunt install connect 4

دیدید که در بالا به راحتی ویژگی livereload رو برابر با true قرار دادیم. حالا دو sub task دیگه بنام cssmin و html به watch اضافه میکنیم و موارد زیر رو درونشون قرار میدیم:grunt install connect 6

تا اینجا کل وظیفه watch بصورت زیر هست:

درون وظیفه cssmin گفتیم هر زمان که هر فایل css که درون پوشه css هست تغییر کرد، وظیفه cssmin که قبلا ساخته بودیم رو اجرا کن. با این کار فایلهای css رو زیر نظر گرفتیم.

حالا درون وظیفه html هم گفتیم که هر زمان فایل index.html مورد تغییر قرار گرفت، وظیفه wiredep اجرا بشه و همچنین ویژگی reload رو برابر با true قرار دادیم. این کار باعث میشه که هر زمان که تغییری در خود index.html به وجود آوردیم، watch دوباره لود بشه و به connect بگه که مرورگر رو رفرش کنه و تغییرات html رو هم در مرورگر ببینیم.

حالا نوبت به این میرسه که وظیفه connect رو بسازیم و تنظیمات مورد نظر رو درونش قرار بدیم. برای اینکار بعد از همه وظایف قبلی یک وظیفه بنام connect میسازیم:grunt install connect 7

حالا تنظیمات رو بصورت زیر درونش قرار میدیم:grunt install connect 8

  1. hostname : در اینجا نام سروری که میخایم بصورت محلی ساخته بشه رو قرار میدیم. در بالا localhost قرار دادیم.
  2. port : در اینجا پورت مورد نظر برای سرور محلی رو مشخص کردیم. تا اینجا اگر بخایم سرور رو ببینیم باید localhost:3000 رو در مرورگر بزنیم
  3. base : با این ویژگی به connect میگیم که کدوم پوشه و دایرکتوری رو بعنوان ریشه سرور قرار بده و وقتی که آدرس localhost:3000 رو میزنیم، اون دایرکتوری باز میشه
  4. livereload : با این ویژگی بین connect و watch یک ارتباط برقرار میکنیم و هر زمانی که تغییری ایجاد بشه، مرورگر بصورت اتوماتیک رفرش میشه.

حالا باید وظیفه connect رو به آرایه وظایف اضافه کنیم. برای اینکار وظیفه connect رو قبل از وظیفه watch اضافه میکنیم، بصورت زیر:grunt install connect 9

حالا اگر دستور grunt رو درون cmd اجرا کنیم، همه وظایف مورد نظر اجرا میشه. بصورت زیر:connect task

همونطور که میبینید وظیفه connect یک سرور بر روی آدرس http://localhost:3000 ساخته شده. اگر مرورگر رو باز کنید و این آدرس رو درونش باز کنید، بصورت زیر خواهد بود:connect task 1

همونطور که دیدید همه فایلها و پوشه ها نمایش داده شدن. بر روی پوشه final کلیک میکنیم تا باز بشه. اگر یک پوشه رو باز کنید و درون اون فایلی بنام index.html وجود داشته باشه، بصورت اتوماتیک لود و نمایش داده میشه. بصورت زیر:connect task 2

همونطور که دیدین فایل index.html درون مرورگر نمایش داده شده. حالا برای اینکه تست کنیم که پلاگین watch و connect کارها رو برای ما اتوماتیک کردن یا خیر، فایل import.css رو باز میکنیم و رنگ پس زمینه رو عوض میکنیم. بعد از اینکه رنگ مورد نظر رو انتخاب کردیم و save کردیم، watch تغییر رو میفهمه و نمایش میده:connect task 3

میبینید که تغییر مورد نظر پیدا شده و وظیفه cssmin اجرا میشه. در پس زمینه اگر مرورگر رو ببینید، خواهید دید که بصورت اتوماتیک رنگ پس زمینه تغییر پیدا کرده:connect task 4

میبینید که تغییر مورد نظر انجام شده. همچنین اگر تغییری در خود index.html به وجود بیارید هم مرورگر بصورت اتوماتیک رفرش میشه. فرض کنید متن بالا رو تغییر بدیم و یک متن دیگه قرار بدیم. بعد از اینکه save کنیم، تغییر مورد نظر تشخیص داده میشه و در مرورگر نمایش داده میشه:connect task 5

بهمین راحتی تونستیم این کار رو انجام بدیم. از این به بعد دیگه همه چیز بصورت اتوماتیک برای شما انجام داده میشه.

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

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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