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

שלב ראשון – יצירת קובץ פרוייקט

החלק הראשון שעלינו לעשות הוא ליצור קובץ פרוייקט אשר יכיל את כל ה-Dependecies של הפרוייקט שלנו. נעשה זאת ע״י כניסה לטרמינל, ניווט לתיקייה של הפרוייקט שלנו והקלדת הפקודה הבאה:

npm init

כאשר יופיעו לנו מספר שאלות אשר בסופן ייווצר קובץ בשם package.json אשר יכיל את פרטי הפרוייקט ואת ה-Dependencies שלו.

שלב שני – רישום Gulp

כעת, לאחר שיצרנו את קובץ הפרוייקט, עלינו לרשום את gulp כ-dependency של הפרוייקט שלנו, נעשה זאת ע״י כתיבת הפקודה הבאה בטרמינל:

npm install --save-dev gulp

הפקודה הבאה אומרת ל-npm להתקין את gulp בפרוייקט הרלוונטי שלנו ולשמור אותו כ-dependency של פיתוח, כלומר, כאשר נפרוס את הפרוייקט לסביבת פיתוח, נדאג ש-gulp יהיה מותקן ככה נוכל להמשיך לעבוד.
בשונה מ-dependency רגיל, עלינו להתקין את gulp אך ורק בסביבת הפיתוח, לכן בקובץ package.json יש חלק של dependencies ושל devDependencies.

שימו לב שאחרי הרצת הפקודה, תיווצר לכם תיקייה הנקראת node_modules, בתיקייה זאת מותקנים כל ה-dependencies של הסיפריות של הפרוייקט שלנו.

שלב שלישי – יצירת קובץ משימות

אז התקנו את gulp ויצרנו קובץ פרוייקט, כעת עלינו ליצור את קובץ המשימות וההגדרות של gulp, קובץ זה נקרא gulpfile.js (ניצור אותו באותה תיקייה בה נמצא הקובץ package.json) ונכניס את התוכן הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );

על מנת להשתמש ב-Dependencies של הפרוייקט שלנו נצטרך לטעון אותם ע״י שימוש בפונקציית require(), כאשר בסוגריים נרשום את שם הסיפרייה אותה אנחנו רוצים לטעון, בדוגמא שלנו זה את gulp.

שלב רביעי – יצירת משימה

משימה היא בעצם פעולה אותה אנחנו רוצים להריץ אשר תבצע פעולה אחת או יותר, יצירת משימה נעשית ע״י שימוש בפונקציה gulp.task(). המשימה הראשונה שנבצע היא משימה פשוטה אשר תדפיס Hello World לטרמינל ותסתיים.

נפתח את קובץ gulpfile.js ונדביק את התוכן הבא בסוף הקובץ:

// Tasks
gulp.task( 'hello', function () {

  console.log( 'Hello World!' );

} );

הקוד מכריז על משימה חדשה אשר נקראת hello, ומדפיסה לטרמינל את המחרוזת Hello World.

שלב חמישי – הרצת משימה

השלב האחרון הוא להריץ את המשימה, על מנת לעשות זאת נכנס לטרמינל וננווט לתיקייה בה נמצא הקובץ gulpfile.js ונריץ את הפקודה הבאה:

gulp hello

לאחר הרצת הפקודה, תוצג בטרמינל ההודעת ״Hello World".

סיכום

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

    כתיבת תגובה

    1. אורלי

      מחכה כבר למאמר הבא…

      הגב
      1. דור צוברי

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

    2. טל יערי

      היי,
      ראיתי שבמאמר חסר קצת הסבר על איך אני מריץ את המשימה?

      הגב
      1. דור צוברי

        היי טל,
        תודה על ההערה, נראה שבאמת שכחתי לכתוב את זה, עדכנתי את המאמר 🙂

    3. Niv Dam

      היי דור.
      איזה כיף שיש מאמר כזה ?
      תודה רבה לך.

      יש לי מספר שאלות:
      איך מתקינים סיפריות שעובדות עם Gulp? ואיך יוצרים משימות של קמפול scss ויתירת minfy לקבצי js, ו html?

      האם יש אפשרות להריץ פוקדה אחת שתעשה את כל המשימות?

      תודה לך ו.. ? מחכה למאמר המשך!!

      הגב
      1. דור צוברי

        היי ניב,
        בעיקרון על מנת להתקין ספריות משתמשים בפקודה npm install --save-dev package-name.

        לגבי דחיסת CSS וכד׳, אני אדגים איך עושים במאמרים הבאים 🙂

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

    שתפו