כלי שימושי למפתחי צד-לקוח: Live Reload

במשך יום פיתוח טיפוסי אנחנו עובדים מול 3 חלונות: עורך הקוד שלנו (IDE), תוכנה גרפית עם העיצוב המקורי (בד”כ פוטושופ), ודפדפן פתוח כדי שנוכל לראות את התוצר של מה שאנחנו כותבים. על כל שינוי בקוד שאנחנו כותבים אנחנו מבצעים שמירה לקוד, והולכים לחלון של הדפדפן לבצע ‘ריענון’ כדי לראות את השינוי בפועל.

כדי לחסוך את הצורך בלרוץ וללחוץ ‘רענן’ בכל רגע בחלון הדפדפן, עד היום עבדתי עם כלים כמו live.js, שזה סקריפט ב-JavaScript שאפשר להכליל בקוד מקור שלנו, והוא מנתר אם התבצע שינוי כלשהו ב-CSS, ומרענן את השינוי אוטומטית בלי שנצטרך ללחוץ ‘רענן’ בדפדפן. הצרה איתו שלפעמים (או יותר נכון: כל כמה דקות) הוא נתקע, וכן שהוא לא עובד על שינויים בקבצים אחרים כמו על HTML או על קבצי סקריפטים ותמונות.

לאחרונה נתקלתי בכלי פנטסטי שעובד בצורה חלקה להפליא בשם LiveReload, שמורכב מתוכנה שצריך להתקין על המחשב עצמו (ישנן גירסאות ל-PC ולמק) ומפלאגין לכרום. לתוכנה מזינים את נתיב התיקייה שעליה עובדים ואת הכתובת השרת המקומי, והיא מנתרת בכל רגע נתון את השינויים על כל סוגי הקבצים בתיקייה. ברגע שהיא מזהה שקובץ התעדכן – היא קוראת לחלון הדפדפן להיתרענן. שינויי HTML מבצעים ריענון כללי לכל החלון, שינויי CSS מתבצעים On The Fly ל-CSS עצמו בלבד.

זה עובד חלק להפליא, וזה מהיר כמו טיל. ממש חלום הסיפור הזה 🙂

הנה צילום מתוך גירסאת ה-PC של התוכנה, בו ניתן לראות כיצד מגדירים אתר נוסף, וכמובן שאפשר להריץ כמה אתרים במקביל:

אפשר לראות בתחתית החלון שהוא סופר כמה פעמים הוא התרענן לבד… אחרי יומיים עבודה עם הכלי הזה, הוא חסך לי 212 ריענונים 🙂

בקיצור, אם אתם עדיין כאן מסיבה כלשהי, אני ממליץ לכם לרוץ ולהתקין: http://livereload.com