אוטומציה עם Gulp: בניית Sprite Sheet

אופטימיזציה של אתרים היא חלק חשוב היום ואף קריטי לקידום האתר בצורה אורגנית ולחווית המשתמש של הגולש. כאשר משתמשים באייקונים באתר, לרוב כל אייקון נטען לבד ע״י ביצוע קריאת HTTP נפרדת וזה מגיע לפעמים למצב אשר ישנן 20-30 קריאות HTTP נפרדות עבור אייקונים באתר. על מנת להתגבר על מצב זה אנו יכולים להשתמש בטכניקה ישנה של בניית אתרים הנקראת Sprite Sheet.

מה זה Sprite Sheet?

המושג Sprite Sheet מתייחס למצב בוא אנו לוקחים את כל התמונות הקטנות באתר ומחברים אותם לתמונה אחת גדולה שכוללת את כל התמונות האחרות עם ריווח בין תמונה לתמונה. מצב זה מאפשר לנו לטעון את כל האייקונים בקריאת HTTP אחת ולחסוך זמן קריאה של כמה מילי שניות ואף יותר.

בניית Sprite Sheet עם Gulp

בעבר כאשר רצינו לאחד מספר תמונות ל-Sprite Sheet, היינו משתמש בשירות חינמי כמו Sprite Cow, אשר היה מקשה מאוד ומאריך את זמני הפיתוח. אך בשנים האחרונות עם העלייה בגל האוטומציה, נכתבו סיפריות אשר עושות זאת בצורה אוטומטית ובזמן הפיתוח.

שלב ראשון – התקנת סיפריות

במאמר זה נשתמש בסיפרייה gulp.spritesmith על מנת לטפל בבניית ה-sprite ויצירת קובץ ה-CSS וקובץ ה-Sprite. על מנת להתקין את הסיפרייה נפתח את הטרמינל במיקום של הפרוייקט שלנו (איפה שנמצא קובץ ה-gulpfile.js) ונקליד את הפקודה הבאה:

npm install --save-dev gulp gulp.spritesmith

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

בחלק הבא אנחנו ניצור את המשימה אשר תשתמש בסיפריית gulp.spritesmith ותייצר לנו את הקבצים איתם נעבוד. נפתח את הקובץ gulpfile.js ונחליף את התוכן הקיים בקוד הבא:

/**
 * Automation with Gulp
 */

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

// Variables
var CSS_DIST = 'assets/css';

var SPRITE_SRC = '__src/images/icons/*.png';
var SPRITE_DIST = 'assets/images/';

// Tasks
gulp.task( 'gen-sprite', function () {

	var _data = gulp.src( SPRITE_SRC )
	                .pipe( spritesmith( {
		                imgName : '../images/icons-sprite.png',
		                cssName : 'icons-sprite.css'
	                } ) );

	_data.img.pipe( gulp.dest( SPRITE_DIST ) );
	return _data.css.pipe( gulp.dest( CSS_DIST ) );

} );

את המשימה אנו מתחילים עם הגדרה של Gulp לקחת את כל קבצי האייקונים שלנו שנמצאים בתיקייה __src/images/icons ולקרוא לסיפרייה gulp.spritesmith. כאשר אנו קוראים לסיפרייה אנו מגדירים לה 2 פרמטרים, הראשון הוא שם קובץ ה-Sprite Sheet והנתיב בו נרצה לשמור אותו (ביחד לתיקית ה-CSS במקרה שלנו), והפרמטר השני הוא שם קובץ ה-CSS שייווצר.

לאחר מכן אנו יוצרים את קובץ ה-Sprite Sheet ולבסוף את קובץ ה-CSS של ה-Sprite Sheet.

שלב שלישי – שימוש ב-Sprite Sheet

כאשר ניכנס לקובץ ה-CSS שנוצר לנו, נראה משהו בסגנון הבא:

/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.icon-add-icon {
  background-image: url(../images/icons-sprite.png);
  background-position: 0px 0px;
  width: 36px;
  height: 36px;
}
.icon-collection-icon {
  background-image: url(../images/icons-sprite.png);
  background-position: -36px 0px;
  width: 36px;
  height: 36px;
}
.icon-heart-icon {
  background-image: url(../images/icons-sprite.png);
  background-position: 0px -36px;
  width: 36px;
  height: 36px;
}
.icon-profile-icon {
  background-image: url(../images/icons-sprite.png);
  background-position: -36px -36px;
  width: 36px;
  height: 36px;
}
.icon-star-icon {
  background-image: url(../images/icons-sprite.png);
  background-position: -72px 0px;
  width: 36px;
  height: 36px;
}

כפי שניתן לראות הקובץ שנוצר מכיל מחלקות CSS עם התבנית הבאה .icon-{FILE_NAME} כאשר את {FILE_NAME} מחליף שם קובץ האייקון שהיה לנו בתיקיית האייקונים.

מלבד זאת ישנן הוראות שימוש, הראשונה ממליצה להוסיף קוד CSS אשר יגדיר את האלמנט של האייקון כ-inline-block על מנת שהדפדפן יתחשב בהגדות Height ו-Width של האייקון.

כל שנותר לעשות הוא פשוט להשתמש באייקון ע״י שימוש באלמנט <i> עם שם האייקון באופן הבא:

<i class="icon icon-add-icon"></i>

סיכום

שימוש ב-Sprite Sheet מתאים כאשר יש לנו תמונות קטנות ואנו מעוניינים לטעון את כולם במכה אחת במקום לטעון את כל אחד מהאייקונים בנפרד ולפגוע בזמן טעינת האתר.

במאמר הבא בסדרה נלמד איך לבנות SVG Sprite על מנת לאחד קבצי SVG לקובץ Sprite Sheet אחד.