נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
מדריכים ללימוד gulp.js בעברית

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

 

מדריך gulp.js

מבוא למדריך gulpjs

אם הבנתם ספרו לחבריכם המפתחים, ואם לא ספרו לנו (כדי שנוכל לשפר את המדריכים).

מבוא ל-gulp.js

למדו כיצד לבצע אוטומציה של משימות נפוצות (ומעיקות) בצד הקליינט באמצעות פלגאינים של gulp. לדוגמה, דחיסה של קבצי CSS ו-JS, קומפילציה של קבצי SASS ו- LESS, הוספת קידומות לתגיות CSS3, ועוד. מדריך זה הוא המבוא ובו מוסבר מבנה קובץ הקונפיגרציה של gulp.

כיצד להתקין את gulp?

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

המשימה הראשונה - כיווץ קבצי javascript באמצעות gulp

במדריך זה נלמד לכתוב את המשימה ראשונה באמצעות gulp.js. משימה שתכווץ קבצי javascript באופן אוטומטי.

קומפילציה של קבצי sass באמצעות gulp

במדריך זה נלמד לקמפל קבצי sass לקבצי css באופן אוטומטי, באמצעות gulp.js.

כיצד לטפל בשגיאות כשעובדים עם gulp?

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

המשימה: דחיסת תמונות באמצעות gulp

כדי לדחוס תמונות באופן אוטומטי באמצעות gulp.js נשתמש בחבילה imagemin, שאותה נתקין, כמו במדריכים קודמים, באמצעות npm. אחרי שהורדנו את החבילה, נערוך את הקובץ gulpfile.js כדי שנוכל להשתמש בחבילה.

כיצד gulp ירענן את הדפדפן באופן אוטומטי כשאנו עורכים את הקוד?

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

ולסיכום הסידרה, סקריפט מלא של gulpfile.js

במדריך האחרון בסדרת ה- gulp.js נסכם את הסידרה, ונפתח סקריפט מלא שמטפל בכל ההיבטים של ניהול צד הלקוח, דוגמת: כיווץ קבצי javascript ו-css, קומפילציה של קבצי sass, ודחיסת תמונות, וגם נלמד כיצד לטפל בשגיאות.

לכל מדריכי ה-gulp.js