توسعه سریعتر با Livereload و Nodemon در Gulp

توسعه سریعتر با Livereload و Nodemon در Gulp

این روزها به وضوح Node.js به داغترین چیز تبدیل شده است. در این پست می خواهیم بر روی افزونه ای که واقعا روند توسعه را سرعت می بخشند تمرکز کنیم.

 

Livereload ابزاری است که بطور خودکار مرورگر را هنگام مشاهده تغییراتی در فایل ها بارگذاری یا refresh می کند. شما برای انجام این کار به chrome یا chromium و یک extension نیاز دارید.

 

Nodemon ابزاری است که بطور خودکار برنامه شما را هنگام مشاهده تغییراتی در فایل ها اجرا و ری استارت می کند. توجه داشته باشید که تفاوت آن با livereload این است که، nodemon برنامه را ری استارت می کند نه بارگذاری مجدد مرورگر. به این معنی که نیازی نیست که به ترمینال رفته و برنامه خود را با کلیدهای CTRL+C متوفت و سپس آن را مجددا اجرا کنید.

 

آنچه را که شما در اینجا به آن دست پیدا خواهد کرد این است که هر زمان تغییری در backend صورت گیرد، برنامه ری استارت، و سپس مرورگر بارگذاری مجدد می شود. تنها کافی است این را در نظر بگیرید که شما در طول توسعه برنامه چند بار مجبور به ری استارت و بارگذاری مجدد مرورگر هستید، این کار باعث می شود در زمان خود صرفه جویی کنید.

 

مرحله اول – تنظیم اولیه و دانلود وابستگی های برنامه

 

به ترمینال خود رفته و دستور npm init را در هر مسیری که دوست دارید تایپ و اجرا کنید.

 

بعد از اینکه دستور زیر را از طریق ترمینال در ریشه پروژه خود وارد کردید:

 

 

این دستور باعث می شود نیازمندی های برنامه ما نصب شوند.

 

مرحله دوم – سمت سرور

 

فایلی به نام app.js در ریشه برنامه خود درست کنید و کدهای زیر را در آن قرار دهید، پیشنهاد می کنم برای یادگیری آنها را بطور دستی تایپ کنید و کپی پست نکنید.

 

 

این کد یک سرور express ساده درست می کند. برای اجرا و تست سرور خود، دستور node app.js را در ترمینال تایپ کنید. حال از طریق مرورگر به آدرس http://localhost:3000 رفته و باید پیام Home را در صفحه مشاهده کنید.

 

مرحله سوم – فایل Gulp

 

حال در ریشه پروژه خود فایل به نام gulpfile.js ایجاد کنید. فایل gulp جایی است که شما کارهایی را که می می خواهید بطور خودکار انجام شوند را تعریف می کنید.

 

کدهای زیر را در فایل gulpfile تایپ کنید:

 

 

اولین کاری که در فایل gulp انجام دادیم این است که ماژول هایی را که دانلود کرده بودیم را به برنامه وارد کردیم. آنگاه یک وظیفه با نام default برای gulp تعریف کردیم. این وظیفه یا task را با دستور gulp در خط فرمان خود فراخوانی می کنیم. در داخل این task با استفاده از livereload.listen() تغییرات را شناسایی می کنیم و سپس nodemon را پیکربندی می کنیم. همانطور که مشاهده می کنید ما از پارامتر restart برای اضافه کردن متد livereload استفاده کرده ایم. بنابراین مرورگر تنها وقتی بارگذاری مجدد می شود که برنامه ری استارت شده باشد.

 

توجه داشته باشید که اگر نام وظیفه default را تغییر دهید، مجبور هستید نام آن را بطور دستی در ترمینال وارد کنید، به عنوان مثال اگر یک وظیفه foo دارید، پس باید در ترمینال دستور gulp foo را تایپ کنید.

 

اگر برنامه شما از مرحله دوم تا حالا در حال اجرا است، آن را با CRTL+C متوقف کنید.

 

حال در ترمینال دستور gulp را تایپ کنید، این کار باعث می شود وظیفه default که در فایل gulpfile تعریف کرده بودیم اجرا شود. حال باید قادر باشید پیغام هایی که gulp در کنسول چاپ می کند را مشاهده کنید.

 

nodemon

 

به مرورگر خود رفته و افزونه livereload را فعال کنید، حال تمام آن چیزی که برای توسعه را لازم داشته اید را در اختیار دارید. سعی کنید res.send(‘Home’) را به چیزی شبیه به res.send('Hello, World') تغییر دهید. بلافاصله بعد از ذخیره فایل، پیغامی از طرف nodemon به شما نمایش داده می شود که برنامه ری استارت شده است و مرورگر وب سایت را از نو بارگذاری می کند. به خاطر داشته باشید که بعد از یک یا دو ثانیه برنامه دوباره آغاز می شود و مرورگر با تغییرات جدید بارگذاری خواهد شد.

 

گاهی اوقات مرورگر ری استارت نمی شود، سعی کنید دوباره CTRL+S را انجام دهید.