אוטומציה עם Gulp: מבוא

Gulp הינו כלי מבוסס Node.js אשר מאפשר לנו לקחת תהליכי פיתוח יום-יומיים ולהפוך אותם לאוטומטיים. בחלק הראשון נלמד מושגים ואיך להתקין את Gulp על המחשב.

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

למה אני צריך אוטומציה?

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

אז מה זה Node.js?

Node.js הינו סביבת פיתוח אשר מבוססת על מנוע V8 המבוסס על קוד פתוח. Node.js מאפשר לנו לכתוב JavaScript בצד שרת, כאשר השימוש הנפוץ שלה היא כתיבת אפליקציות רשת כגון REST API.

אך עם התרחבות השימוש ב-Node.js והתקדמות הגרסאות, התחילו להשתמש בה על מנת לפתח כלי פיתוח אשר מקלים על העבודה היום יומית של המתכנת ונותנת סט כלים נרחב יותר, אחד מכלים אלו הוא Gulp.

בנוסף, מושג נוסף שכדאי להכיר זה npm, או Node Package Manager. ה-npm מאפשר לנו לתעד ולהגדיר באיזה כלים (Dependencies) הפרוייקט שלנו משתמש, כך כאשר נרצה לתת לאדם נוסף להשתמש בקוד שלנו או כאשר נרצה להעביר את הקוד שלנו מהפיתוח הלוקלי אל השרת עצמו, לא נצטרך להעלות את ה-Dependencies, אלא פשוט נוכל להריץ פקודה אחת ו-npm ידאג להוריד אוטומטית את הכלים הללו.

אוקיי, Gulp?

Gulp הינו כלי פיתוח מבוסס Node.js, אשר מאפשר לנו לקחת תהליכים יום יומיים ולעשות אותם בצורה אוטומטית עם מינימום התערבות שלנו, פרט להגדרה ראשונית.

ישנם המון דברים שאפשר לעשות עם Gulp:

• קימפול קבצי SCSS לקובץ CSS.
• מיניפיקציה ואיחוד של קבצי JavaScript.
• טעינה של הדפדפן בצורה אוטומטית כאשר אנחנו מבצעים שינויים.
• דחיסה של תמונות.
• איחוד של תמונות קטנות ואייקונים ל-Sprite.

ועוד הרבה מאוד אופציות.

התקנה והגדרת הסביבה

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

שלב ראשון – התקנת Node.js

השלב הראשון הוא להתקין את Node.js, במידה ויש לכם כבר מותקן על המחשב, המשיכו לשלב הבא.

נתחיל בלהיכנס לאתר של Node.js ולהוריד את קובץ ההתקנה של Node.js, אני ממליץ ללכת על ה-LTS ולא על הגרסא הכי נוכחית. לאחר שהקובץ יסיים לרדת, נריץ את ההתקנה.

לאחר ההתקנה, נפתח את ה-Terminal (אם אתם על מק או לינוקס) או את ה-Command Prompt (אם אתם בווינדוס) ונריץ את הפקודה הבאה:

node -v

אם נראה כתגובה את מספר הגרסה שהתקנו של Node.js, הכל תקין ואפשר להתקדם לשלב הבא.

שימו לב, כאשר מתקינים את Node.js, אוטומטית מותקן לכן npm.

שלב שני – התקנת Gulp

השלב הבא הוא להתקין את Gulp, בתור התחלה נתקין את Gulp בצורה גלובלית ובהמשך נתקין אותו גם ברמת הפרוייקט. על מנת להתקין את Gulp נפתח שוב את ה-Terminal או את ה-Command Prompt ונריץ את הפקודה הבאה:

npm install -g gulp

לאחר הרצת הפקודה אתם תראו המון המון שורות שמודפסות לכם ב-Terminal, מה שקורה זה ש-npm מוריד את gulp ואת ה-Dependencies של gulp על מנת שנוכל להשתמש בו. בנוסף npm ידאג להגדיר ש-gulp יהיה מוגדר ב-$PATH של ה-Terminal על מנת שנוכל להשתמש בו מבלי לתת את הנתיב אל הסקריפט.

לאחר ההתקנה נוכל להריץ את הפקודה הבאה על מנת לוודא שהכל הותקן כהלהכה:

gulp -v

בתגובה נצפה לראות את גירסת Gulp המותקנת.

סיכום

אז למדנו קצת מושגים כמו אוטומציה, Node.js, npm ו-Gulp ואפילו איך להתקין את כלים אלו על המחשב שלנו. במאמר הבא נלמד איך להגדיר פרוייקט חדש ואיך להגדיר Dependencies של הפרוייקט שלנו.