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

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

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

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

על מנת לייצר SVG Sprite נצטרך להשתמש בספרייה gulp-svg-sprite, נפתח את הטרמינל וננווט לתיקיית הפרוייקט  (לתיקייה שבה נמצא הקובץ gulpfile.js) שלנו ונרשום את הפקודה הבאה:

npm install --save-dev gulp gulp-svg-sprite

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

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

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var svgSprite = require( 'gulp-svg-sprite' );

// Variables
var SVG_SRC = '__src/images/*.svg';
var SVG_DEST = 'assets/images';

var SVG_CSS_DEST = '../css/svg-sprite.css';

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

	return gulp
		.src( SVG_SRC )
		.pipe( svgSprite( {
			mode : {
				defs : {
					bust : false,
					render : {
						css : {
							dest : SVG_CSS_DEST
						}
					},
					dest : SVG_DEST,
					sprite : 'icons-sprite.svg',
				}
			}
		} ) )
		.pipe( gulp.dest( '.' ) );

} );

במשימה אנו קוראים לספרייה gulp-svg-sprite ואנחנו מעבירים לה אובייקט JSON שמכיל את הגדרות הספרייה אותן נרצה להחיל בעת הרצת המשימה. המשימה תייצר לנו קובץ SVG Sprite וקובץ CSS אשר מכיל את מימדי האייקונים השונים.

שימוש בקובץ SCSS במקום CSS

במידה ונרצה שהספרייה תייצר קובץ SCSS במקום קובץ CSS, ניתן לעשות זאת ע״י שינוי הגדרות הסיפרייה. נפתח שוב את הקובץ gulpfile.js ונחליף את הקוד בקוד הבא:

/**
* Automation with Gulp
*/

// Dependencies
var gulp = require( 'gulp' );
var svgSprite = require( 'gulp-svg-sprite' );

// Variables
var SVG_SRC = '__src/images/*.svg';
var SVG_DEST = 'assets/images';

var SVG_SCSS_DEST = '../../__src/scss/_svg-sprite.scss';

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

return gulp
	.src( SVG_SRC )
	.pipe( svgSprite( {
		mode : {
			defs : {
				bust : false,
				render : {
					scss : {
						dest : SVG_SCSS_DEST
					}
				},
				dest : SVG_DEST,
				sprite : 'icons-sprite.svg',
			}
		}
	} ) )
	.pipe( gulp.dest( '.' ) );

} );

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

על מנת להשתמש ב-SVG Sprite נצטרך להשתמש בקוד הבא בכל מקום שבו נרצה להטמיע את האייקון או ה-SVG הרלוונטי:

<svg class='icon svg-profile-icon-dims'>
	<use xlink:href="assets/images/icons-sprite.svg#profile-icon"></use>
</svg>

שימו לב שיש להחליף 2 דברים על מנת להשתמש באייקון שונה:

1. מחלקת CSS – עלינו לשנות את ה-CSS Class של האייקון באופן הבא: svg-{FILE_NAME}-dims.
2. מזהה האייקון – עלינו לשנות את ה-ID של האייקון אותו אנו רוצים באופן הבא: icons-sprite.svg#{FILE_NAME}

יש להחליף את {FILE_NAME} בשם קובץ האייקון או ה-SVG שאנו רוצים.

סיכום

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

במאמר הבא בסדרה נלמד כיצד לבצע אופטימיזציה לקוד SCSS שלנו כאשר עובדים עם Media Queries.