אוטומציה עם Gulp: משימות

בחלק השני של סדרת "אוטומציה עם 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 אחד אשר דחוס וקל משקל.