Dev-Time

הכלי שיעשה לכם סדר בחיים – Grunt השור הזועם

ברוכים השבים ל״זמן פיתוח״, במאמר הבא נסביר איך לכתוב Grunt מ-0 ונדבר קצת על הכלי המדהים הזה.

למה אני צריך Grunt – Task Runner ?

בזמן ש JavaScript מתפתחת להיות שפת מיינסטרים, הפרויקטים בסביבת צד-לקוח הולכים וגדלים לאפליקציות מורכבות, כמות הקוד גדלה ,התלויות בחבילות וספריות הפך לחלק משמעותי בפיתוח, וכמובן הצורך למבנה פרויקט מודולרי. לנו המפתחים כבר יש אחריות גדולה יותר, למשימה של כתיבת קוד יעיל ומסודר מצטרף הצורך לנהל את מבנה הפרויקט, קימפול וחיבור קבצי עיצוב וקוד, ניהול התלויות וכדומה. לכן על-מנת להוריד את הנטל הכבד ולהבטיח תהליך קבוע של מבנה קבצים המרות וכדומה, מומלץ להשתמש בכלים שיעשו את העבודה בצורה אוטומטית לפי קובץ הגדרות שאותו נכתוב פעם אחת וGrunt יעשה את העבודה בכל שינוי של קובץ. דוגמא למשימות שנבצע עם Task Runner:

  • קימפול של קבצי SASS ל CSS.
  • צפיה בזמן אמת בשינויים ועדכון אוטומטי של כל הפרויקט.
  • הרצה של שרת לצורך פיתוח.
  • חיבור סקריפטים, עיצובים וכדומה לחבילה אחת.
  • בדיקת הקוד שלנו, סינטקס, שגיאות.
  • הרצת Unit Test באופן אוטומטי.

יש עוד המון אפשרויות, אך חשוב להכניס לראש את המודל המנטלי של כלי ״מריץ משימות״. יש עוד כלים דומים כמו Gulp, Webpack לכל אחד יתרונות חסרונות וגישות שונות ואפילו תוספות שונות.

נתחיל לכתוב קוד היום?! לצערי… 🙂

דרישות לעבודה מול Grunt זה התקנה של Node.js על המחשב שלנו. חשוב להבין שנוד זה הסביבה שעליה רץ Grunt. כל הראיון שNode.js היא שפת צד שרת ולכן יש לה את היכולת לשנות קבצים על המחשב שלנו. זו הסיבה ש Grunt יכולה לבצע משימות שקשורות לקבצים בפרויקט. היתרון שאנחנו לא כותבים את הקוד המעשי, אנחנו כותבים קובץ הגדרות ומתקינים ״חבילות״ שעושות את העבודה עבורנו. (לפחות ברמה הבסיסית, כמובן שאפשר לכתוב חבילות ומשימות משלנו). אז קישור https://nodejs.org התקינו את Node על המחשב.

חומר למחשבה: אני לא ארחיב על Nodejs ואיך זה עובד מאחורי הקלעים, אבל צריך לפחות להבין שהרעיון של Ryan Dahl, היה בהשראת הדפדפן. v8 שזהו המנוע שמריץ את js בסביבת הדפדפן הוא קוד פתוח, ולכן יש לנו את האפשרות באמצעות קוד  C++ להרחיב את היכולות של המנוע ולתת לו API חדשים.

התקנה נוספת באופן גלובלי

השתמנו כרגע בNPM(node package manager) שזה בעצם מאגר הקוד הפתוח שלnode. הסימן -g זהו בעצם דגל שמסמל התקנה ברמת התחנה.

חשוב מאוד להתקין את הGrunt-Cli בגלובל, כי הוא בעצם הכלי שיריץ את קובץ ההגדרות שלנו. התקנה שלו מאפשרות לנו להשתמש בפקודה grunt בכל נתיב במחשב שלנו בCommand Line.

נתקין משימה בשביל הדוגמא שלנו

Grunt-Cli מצפה לקובת הגדרות בשם קבוע: GruntFile.js. הוא יריץ את קובץ ההגדרות ויבצע עבורנו את המשימות, אין לנו צרוך להכנס לעומקי הקוד בשביל לכתוב משימה אבל ככה זה עובד מאחורי הקלעים.

דוגמא לקובץ הגדרות :

נסביר את הקוד.

module.exports – השימוש ב commonJs זהו חלק של node ולא של grunt, זה בעצם האובייקט שאנחנו חושפים, במקרה הזה חשפנו פונקציה, grunt-cli לוקח את הפונקציה ומריץ אותה( במקום הפרמטר grunt הוא ישלח את האובייקט שלו כפרמטר).

grunt.initConfig זוהי הפנוקציה שמקבלת אובייקט, בעצם את אובייקט ההגדרות שלנו. נעצור כאן ונסביר.

בדוגמא של קובץ ההגדרות הנ”ל, אני רוצה להריץ משימה שתחבר את קבצי הJS לקובץ 1. (bundle). ל grunt יש המון תוספים רשמיים שנמצאים תחת הכותר Contrib למשל

grunt-conrib-concat שבו אני מתשמש לחבר את הקבצים.

grunt-contrib-sass שבו אשתמש כמובן להמיר קבצי sass לcss

יש עוד המון תוספים ואפשר לחפש בגוגל לפי הצורך. אבל הכי חשוב להבין שלכל תוסף יש דוקומנטציה ברורה איך כותבים את ההגדרות. לדוגמא שלנו השתמשתי בgrunt-contrib-concat והנה קישור לדוקומנטציה –

 https://github.com/gruntjs/grunt-contrib-concat

הסינטקס קבוע ומשתנה מתוסף לתוסף אז צריך לעקוב אבל הוא די דומה. בדוגמא שלפנינו למשל קונפיגורציה פשוטה. אפשר לראות בחלק הראשון 1.1

concat – שם המשימה.

src – נתיב הקבצים שנרצה לחבר (כותבים כמערך).

dest – קובץ היעד שנרצה לייצא.

בחלק השני 1.2 חשוב לטעון את הפלאגינס שהתקנו ואנחנו הולכים להשתמש בקונפיגורציה שלנו. למשל השתמשתי ב grunt-contrib-concat.

יש אפשרות לטעון את הפלאגינס בצורה אוטומטית ועוד הרבה תוספות אבל זה הבסיס, וכך נטען כל תוסף שנרצה להשתמש בו.

ובחלק השלישי 1.3

בחלק הזה אנחנו מגדירים אוסף של משימות שירוצו כאשר נקליד את הפקודה grunt בתיקיה עליה אנחנו עובדים. במידה וזה משימה בשם default נצטרך לרשום grunt בלבד. אם נרצה לייצר משימה נוספת לדוגמא grunt start

grunt יחפש את המשימה start ויריץ את כל המשימות תחתיה במקרה שלנו concat בלבד.

לסיכום:

זהו מאמר מאוד בסיס שמסביר על הסביבה ועל הרעיון, כל שאליכם לעשות הוא לחשוב איזה משימות אתם צריכים כדי לארגן את הפרויקט שלכם ולחפש את התוסף בגוגל, אין לי המלצה טובה יותר כי זו הדרך היחידה.

אבל אקח לדוגמא אם הייתי רוצה משימה שתטפל בקבצי הsaas הייתי מחפש: grunt compile sass files אני בטוח שתגיעו לפלאג המתאים. תקראו קצת את הדוקומנטציה ותגלו שבדיוק כמו במדריך הזה הקובץ קונפיגורציה מאוד פשוט וברור והשינויים מאוד קטנים בין תוסף לתוסף.

לידור אביטן – FullStack Developer

ליצירת קשר שלחו הודעה פרטית בלינקדאין

לידור אביטן

מפתח FullStack בחברת Intel-Security

Add comment

Follow

Get every new post delivered to your Inbox

Join other followers