מדריך gulp.js
אם הבנתם ספרו לחבריכם המפתחים, ואם לא ספרו לנו (כדי שנוכל לשפר את המדריכים).
מבוא ל-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, ודחיסת תמונות, וגם נלמד כיצד לטפל בשגיאות.
ואידך זיל גמור...
