با BrowserSync یک ابزار جهت خودکارسازی روند توسعه وب سایت است.در گذشته نیز ما بسیاری از کارها مثل کامپایل فایل های Sass,بهینه سازی تصاویر و … را خودکارسازی کرده بودیم تا خود به خود انجام شوند ولی BrowserSync سطح جدیدی از انجام خودکار کارها را ارائه می کند.
قابلیت های BrowserSync
- ریلود زنده صفحه(Live Reloading) : این احتمالا مهم ترین قابلیت BrowserSync هست. شما کافیست کدهای خود را تغییر دهید و تغییرات بلافاصله در مرورگرتان دیده خواهد شد.فرقی هم نمی کند در موبایل ببینید یا دسکتاپ یا …
- هماهنگ سازی تعامل(Interaction Synchronization) : این به معنی این است که تمام کارهای شما روی کد به صورت آینه ای روی همه مرورگرها بازتاب خواهد داشت. این قابلیت کوچک بسیار کاربردی است مخصوصا وقتی همزمان روی وسایل مختلف مثل موبایل و دسکتاپ کار تست را انجام می دهید.
- شبیه سازی سرعت اینترنت کم : مطمئنم که شما انتظار کاربرانی را از سراسر جهان برای بازدید از وب سایت تان می کشید . کاربران بعضی از کشور ها(مثل کشور خودمان) به اندازه کافی خوش شانس نیستند که از سرعت خوب اینترنت برخوردار باشند . برای اینکه ببینید سایت تان در سرعت های کم اینترنت چگونه کار می کند می توانید با BrowserSync جریان سرعت اینترنت را کنترل کنید.
- تاریخچه URL : چون BrowserSync همه آدرس های بازدید شده پروژه تان را نگهداری می کند ، می توانید یک آدرس تستی را بیابید و آن را به همه مرورگرهای فعال تان بفرستید.
- به علاوه : BrowserSync با خیلی از ابزار های انجام خودکار کارها مثل Gulp و Grunt هماهنگی دارد . همچنین روی بسیاری از سیستم عامل ها می تواند کار کند.
BrowserSync چگونه کار می کند؟
اول از همه BrowserSync یک سرور کوچک ایجاد می کند، اما اگر شما از قبل یک سرور داشته باشید می تواند خود را به آن قلاب کند و به صورت یک پراکسی کارش را انجام دهد. سپس یک فایل JavaScript به همه صفحات تزریق می کند.این فایل از WebSockets برای برقراری ارتباط بین سرور و کلاینت استفاده می کند تا تغییرات در کد یا رفتارهای مرورگر را تشخیص دهد. به محض اینکه BrowserSync یک فعالیت را ببینید ، صفحه را ریلود می کند.
نصب BrowserSync
BrowserSync یک پکیج npm است بنابراین Node.js باید روی سیستم تان نصب باشد.برای نصب BrowserSync کافیست ترمینال را باز کرده و دستور زیر را بزنید:
npm install -g browser-sync
برای اینکه مطمئن شوید BrowserSync نصب شده است دستور زیر را در ترمینال اجرا کنید:
browser-sync --version
حالا باید نسخه BrowserSync را ببینید . در هنگام نگارش این مقاله نسخه آن 2.11.1 هست.
استفاده از BrowserSync
اول استفاده از BrowserSync را با فایل های استاتیک انجام می دهیم .فرض می کنیم شما یک ساختار پوشه بندی شبیه شکل زیر دارید:
حالا در ترمینال از مسیر اصلی پوشه پروژه ، دستور زیر را اجرا کنید:
browser-sync start --server --files "*.html, css/*.css"
این دستور به BrowserSync می گوید که همه فایل های HTML و CSS را بپاید.به محض اجرای دستور فوق ، فایل اصلی پروژه (مثلا Index.html) در مرورگر پیش فرض سیستم عامل باز می شود . در کنسول هم باید شکلی همانند زیر را مشاهده کنید:
- Local : آدرسی را نشان می دهد که شما می توانید روی کامپیوتر خودتان پروژه را ببینید
- External : آدرسی را نشان می دهد که اگر در یک شبکه LAN یا Wifi باشید، هر کسی در این شبکه از طریق این آدرس می تواند پروژه را بیینید.
- UI : در بخش های بعدی در موردش توضیح خواهیم داد.
