למה חשוב שתכירו את Gulp [פיתוח]

קצת על Gulp, כלי שפועל באמצעות Node.js, מותקן באמצעות npm ולמה חשוב כל כך שתכירו אותו

gulp

מאת יקי רפאל, מפתח Front-end ב-Payoneer

בעולם פיתוח ה-web קיימות הרבה שיטות וצורות עבודה שונות ומגוונות. בעולם הזה (html, css, javascript..) שהופך וניהיה יותר מודולרי ומפורק להמון חלקים, דרוש קצת סדר לפני שמעלים את הקוד לסביבת production. ולמה אני מתכוון שאני אומר סדר: אופטימזציה ומיניפיקציה של קבצים, קימפול של קבצים מסוג sass, מניעת כפילויות בקוד, איחוד של קבצים (bundling), הורדת הערות, הוספת prefixes לתמיכה בדפדפנים ועוד ועוד…

כדי ליישם את הסדר הזה בצורה מהירה, אוטומטית וטובה יש צורך בכלים כמו Gulp, Grunt , WebPack, Browserify. אני בטוח שלכל אחד ממכם יצא להתקל באחד מהשמות הללו (במידה ואתם מפתחי web), ולחלקכם אפילו לעבוד עם אחד מהם.

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

כיצד gulp פועל

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

את ההנחיות (מה שאנחנו מבקשים ממנו שיבצע בצורה אוטומטית בשבילנו) אנחנו כותבים בתוך קובץ בשם gulpfile.js.

gulpfile מחולק ל-3 חלקים:

  • החלק הראשון זה המקום בו אנחנו “מודיעים” באיזה סוג של פעולות אנחנו נשתמש (לדוגמא: אנחנו מעוניים ב-minification של קבצי css, ריענון אוטומטי של הדפדפן כאשר מבצעים שינוי בקבצי html ואופטימיזציה של קבצי התמונה הנמצאים בתוך תיקית ה-images… ).
  • החלק השני הוא המקום בו אנחנו מגדירים את המשימות.
  • החלק השלישי זה הגדרת סדר הפעולות (איזה פעולה תפעל אחרי איזה פעולה…).

חשוב להגיד, שכל סוג פעולה (task) שקיים ל-Gulp הוא בעצם הרחבה (Package) שנצטרך להתקין בנוסף על ידי npm. ניתן למצוא את רשימת ההרחבות הקיימות ל-Gulp בדף הבא.

לבסוף, לאחר שהתקנו (בעוד מספר שורות נראה כיצד) את Gulp, יצרנו את הקובץ gulpfile.js והתקנו את אותם הרחבות ותוספים בהם נרצה להשתמש – נשאר לנו להריץ את הפקודה Gulp.

כאשר מריצים את הפקודה, Gulp אחראית לעשות קסמים ברקע, ולאחר מספר שניות לתת לנו פלט של מה שביקשנו (קבצי css\html\js…): קבצים חדשים עם השינויים שאותם הגדרנו בקובץ ה-gulpfile. נהוג להגדיר ולמקם את הקבצים החדשים בתוך תיקית Build או Dist.

gulp-infographic

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

התקנה

הדבר הראשון שנעשה זה נייצר תיקייה לפרוייקט c:\Project\myproject ובתוכה נייצר קבצים ותיקיות לפי המבנה הבא:

files-struct

בתוך קובץ ה-html וה css, נייצר אלמנט לדוגמא – ריבוע. לריבוע ניתן תכונות פשוטות ונריץ אנימציית סיבוב פשוטה:

pic1

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

Node.js

לאחר מכן, נתקין Node.js (אפשר להוריד מהאתר ולהתקין לפי ההוראות שלהם.)

בסיום ההתקנה, נפתח Terminal/Command-line שמסוגל להריץ Node. ונגיע לנתיב של הפרוייקט שלנו ל-c:\Project\myproject

בתוך הנתיב נריץ את הפקודה:

npm install –save-dev gulp

הפקודה הזו אחראית להתקין את Gulp בתיקית הפרוייקט כדי שנוכל להשתמש בו בהמשך.

gulpfile

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

תכנון המשימות

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

  • Autoprefixer – תפקידה לאתר תכונות css בתוך הקבצים שלנו, שצריכות להיות עם Prefixes לסוגי דפדפנים – ולייצר פלט עם תוספת ה Prefixes שלנו.
  • minify CSS – תפקיד הפלאגין הזה הוא לקלוט קובץ css ולעשות לו מוניפיקציה (לצורך שיפור ביצועים). מיותר להסביר למה אנחנו צריכים לעשות את זה לפני העלאה לסביבת פרודקשן.

אני רוצה לתכנן את המשימות שלי לפי הסדר הבא: כאשר אריץ את הפקודה Gulp אני מעוניין לסרוק את כל קבצי ה-css שיש לי בתוך תיקית ה-Source. הדבר הראשון שאני רוצה זה לבדוק האם יש תכונות css שצריך להצמיד להם prefix ואם כן אז להוסיף להן. הדבר השני זה לעשות מיניפיקציה לכל ה-css והדבר האחרון זה לייצר את קובץ ה-css החדש שלנו לתוך תיקית ה-dist הריקה שלנו.

כתיבת המשימות

נפתח את קובץ ה-gulpfile.js על ידי עורך קוד כלשהו והדבר הראשון שנכתוב בו זה:

var gulp = require('gulp');

שורה שנכתוב בכל קובץ gulpfile כדי שנוכל להשתמש בו בקובץ (קיצר – חייב אותה).

לאחר מכן, בתוך ה-Terminal\Commandline נתקין את שני הפלאגינים בתוך הנתיב הראשי של הפרוייקט.

npm install –save-dev gulp-autoprefixer gulp-minify-css

נחזור לקובץ gulpfile ונוסיף את ההטמעה של שני הפלאגינים בקוד:

Screen Shot 2016-04-25 at 11.54.20

עכשיו נגדיר את המשימה הראשונה שלנו. פשוט נרשום בהמשך הקובץ את הבלוק הבא:

Screen Shot 2016-04-25 at 11.54.27
מה שהגדרנו בהתחלה זה את שם ה-task (בחרתי לקרוא לו autoprefixer). לאחר מכן הגדרתי את מיקום קובץ ה-css המקורי באפליקציה שלי (src/styles/style.css). ולבסוף הגדרתי את תיקיית הפלט בו נמקם את קובץ ה-css החדש (dist).

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

עכשיו אפשר לשמור את הקובץ, לחזור ל-Command Line ופשוט להריץ את הפקודה:

gulp autoprefixer

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

Screen Shot 2016-04-25 at 11.56.16
בואו באמת נבדוק האם הצלחנו. נראה האם נוצרה לנו תיקיה חדשה בשם dist ובתוכה קובץ css… אם כן, נפתח את הקובץ ונראה את ה-prefixes שנוספו לנו.

עכשיו נגדיר את הטאסק השני, ה-Minify-css. נרשום את הבלוק הבא מייד לאחר הבלוק של הטאסק הקודם:

Screen Shot 2016-04-25 at 11.56.20
מה שקורה בהגדרת הטאסק הזה זה קודם כל הגדרת שם הטאסק שאנחנו מעוניינים לתת לו : minify-css. ,מיקום קובץ המקור ומיקום קובץ היעד… כמעט אותם הגדרות כמו בטאסק של ה-autoprefixer.

נשמור את הקובץ, ניגש ל-CommandLine ושם נריץ את הטאסק הזה בצורה הבאה:

gulp minify-css

אם הכל עבר בהצלחה, אנחנו נוכל לראות בסיום ההרצה את קובץ היעד שלנו בתיקית dist. וכאשר נפתח אותו, נראה שהקובץ באמת עבר מיניפיקציה.

שילוב של הטאסקים

כרגע יש לנו 2 טאסקים שרצים בנפרד, לפי פקודה. אבל לא משולבים ביחד. אם לדוגמא נרצה להריץ פקודה שקודם כל תבצע סריקה על ה-css ותוסיף prefixes ולאחר מכן תעשה להכל מיניפיקציה?

אז יש המון פתרונות. הפתרון הקל והפשוט הוא: בתוך הבלוק של הטאסק autoprefixer – נוסיף את השורה שמבצעת את המניפיקציה לפני ה-pipe האחרון. וככה זה נראה אחרי ההוספה:

Screen Shot 2016-04-25 at 11.58.38

עכשיו אפשר למחוק את הטאסק minify-css. וזאת מפני שה-autoprefixer משרשר בתוכו את התהליך של המניפיקציה.

וככה נראה הקובץ:

Screen Shot 2016-04-25 at 11.58.43

ועכשיו אם נריץ את הפקודה gulp autoprefixer, נראה שהקובץ css שיצא לנו, ביצע את 2 הפעולות (גם autoprefix וגם מניפיקציה).

Default task

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

במקרה שלנו, כרגע יש טאסק אחד, אבל אם נניח, לפני המחיקה של הטאסק האחרון – היו לנו 2 טאסקים, ואני הייתי מעוניין להריץ את שניהם כאשר אריץ את הפקודה gulp, אז הייתי מגדיר את הקטע הבא בסוף הקובץ:

gulp.task('default', ['autoprefixer','minify-css']);

אך, בגלל שאין לי עכשיו את הטאסק האחרון, אני אקבל שגיאה כאשר אריץ את הפקודה gulp.

כדי שזה ירוץ בצורה תקינה, נוריד את ההגדרה של הטאסק האחרון מה-Default:

gulp.task('default', ['autoprefixer']);

הפוסט פורסם לראשונה בבלוג אמנות המסך.

כתב אורח

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

הגב

2 Comments on "למה חשוב שתכירו את Gulp [פיתוח]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
Mr.WebDev
Guest

תודה על הסקירה הקצרה! נקי וברור!
אבל, כמה הערות:
1) עדיף שתראה את שתי הדרכים למימוש סדר הרצת המשימות. עוד פיסקה אחת היתה מבהירה יותר בבירור את שתי האופציות שהצגת.
2) הפסקה האחרונה מרגישה כאילו נרשמה בחיפזון. שוב, אם היית מפריד את שתי האופציות לא היית צריך להשתמש במילה נניח ומה היה קורה אם..
3) פסקת סיום? מילות סיכום?

jsninja
Guest

Try Webpack a lot more useful and simpler then gulp/grunt

wpDiscuz

תגיות לכתבה: