رفرش خودکار ، عصای دست برنامه نویسان Front-End

یه ابزار پیدا کردم که هلو!

الان داشتم پروتوتایپی که برای تم وب سایت یک شرکت طراحی کردم رو تبدیل به کد میکردم و به این فکر میکردم که من دیگه حوصله ندارم هر بار توی کدهام تغییر ایجاد می کنم ، alt+tab بزنم و توی مرورگر F5 بزنم که با رفرش شدن صفحه تغییرات رو ببینم!

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

این نرم افزار، در اصل یه ابزار هستش که یه watcher روی فولدری که داریم توش کدنویسی میکنیم تنظیم میکنه ، و هر بار تغییری توی فولدر مد نظر ما ایجاد شد ، صفحه مرورگر مربوط به اون رو رفرش میکنه! روی windows و mac هم کار میکنه.

یعنی ، شما هر تغییری که توی فایل ها و کدهای css,html,javascript,phpو... ایجاد کنید و با زدن ctrl+s اون رو ذخیره کنید، و یا یه فایل رو تغییر نام یا مسیر بدید یا عکسی اضافه کنید و خلاصه هر تغییری توی فولدر ایجاد کنید، صفحه مرورگر به صورت اتوماتیک رفرش میشه و تغییرات نمایش داده میشه.

همچین ابزاری رو بیشتر توسعه دهنده های node.js باهاش آشنایی دارن با اسم hot reload . چیزی که با بودنش زندگی توسعه دهنده های react native رو آسودگی بخشیده!

سخن بسیار است به خاطر ذوق فراوان ، بهتره با مثال بریم جلو.

به سایت livereload.com میریم و برای سیستم عامل خودمون دانلودش میکنیم ، قاعدتا بعد از دانلود نصبش هم میکنیم.

بعد از نصب ، همچین صفحه ای باز میشه:

حالا روی add + کلیک میکنیم:

• اگر خارج از لوکال هاست و همینطوری توی یه فولدری داریم طراحی انجام میدیم ، کافیه که اون فولدر رو انتخاب کنیم.
• اگر داریم تم وردپرس مینویسیم ، نیازی به انتخاب پوشه تم نیست و میشه فولدر اصلی یا root وردپرس رو انتخاب کرد.

بعد از انتخاب یا Select Folder ، اسم فولدر زیر دکمه add میاد که روش کلیک میکنیم ، توی این نسخه فعلا امکان watch لوکال هاست نیست ، اما میبینیم که یه کد داده :

اون کد :

('<script src=&quothttp://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1&quot></' + 'script>')

خوب این کدها رو به فایل اصلی تم یعنی index.php یا index.html یا main.html یا هرچیزی که اسمش رو میذارید (همون صفحه اصلی تم که کدهای اصلی رو توش مینویسیم) اضافه میکنم و تمام!

آدرس صفحه ای که دارم طراحی رو انجام میدم باز میکنم (برای من localhost/wordpress) ، توی کدهای یه فایلی مثل style.css یه کم تغییر ایجاد میکنم و ctrl+s رو میزنم ؛ بووووووم ، صفحه رفرش شد و تغییرات رو میبینم :)

همونطور که میبینید احتمالا توی نسخه های آینده ، امکان watch خودکار لوکال هاست رو اضافه کنه ، همینطور اینکه کلی امکانات باحال دیگه هم برای فایل تایپ های مختلف توی actions+files گذاشته که هیچ کدوم کار نمیکنن!! خودش گفته برای نسخه های آینده س و فعلا گذاشتم برای خالی نبودن عریضه! همچنین برای پیج های آنلاین هم کاربرد داره و میشه با نصب افزونه مرورگر باهاش کار کرد! خلاصه که خیلی خوبه!

به قدری خوشحال شدم (نمیدونم این همه سال چرا دنبالش نرفتم :| ) که احتمال میدم خیلی بد پست رو نوشتم ، پس خودتون نصبش کنید و بعدش این پست رو با هر طراحی که نیاز داره بهش به اشتراک بذارید :)