אוטומציה עם Gulp: איחוד Media Queries

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

שיטת עבודה זו נוחה ואכן חוסכת לנו עבודה וזמן כאשר עובדים על מספר קבצי SCSS או Less, אך היא באה עם מחיר יקר, משקל הקובץ. כאשר הקובץ מקומפל, הוא ישקול לרוב יותר והדפדפן ידרוש יותר כוח עיבוד וזיכרון על מנת לזכור את כל ה-Media Queries שהוגדרו בקבצי ה-CSS של האתר.

על מנת להתגבר על בעיה זו ניתן להשתמש בסיפרייה אשר תעבור על קוד ה-CSS שקומפל או על קובץ ה-CSS הרגיל של הפרוייקט שלנו (בהנחה שלא עובדים עם SCSS או Less) ותבצע לנו את האיחוד.

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

בשלב הראשון נתחיל בכך שנתקין את הסיפריות בהן נשתמש, במקרה שלנו הסיפרייה הכי חשובה היא gulp-group-css-media-queries.
נפתח את הטרמינל, ננווט לתיקיית הפרוייקט שלנו ונקליד את הפקודה הבאה:

npm install --save-dev gulp gulp-sass gulp-group-css-media-queries

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

לאחר התקנת הסיפריות, נכתוב את המשימה אשר תדאג לקמפל את הקוד שלנו ולהשתמש בסיפרייה gulp-group-css-media-queries על מנת לאחד את ה-Media Queries.
נערוך את קובץ המשימות של Gulp (קובץ gulpfile.js) ונדביק את הקוד הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var scss = require( 'gulp-sass' );
var combine_mq = require( 'gulp-group-css-media-queries' );

// Variables
var SCSS_SRC = '__src/scss/**/*.scss';
var SCSS_DIST = 'assets/css';

// Tasks
gulp.task( 'build-scss', function () {

	return gulp
		.src( SCSS_SRC )
		.pipe( scss() )
		.pipe( combine_mq() )
		.pipe( gulp.dest( SCSS_DIST ) );

} );

כמו שניתן לראות, אחרי שקוד ה-SCSS (בדוגמא שלנו) סיים את תהליך הקמפול, נקראת הסיפרייה gulp-group-css-media-queries ולבסוף הקוד שעבר עיבוד נשמר במיקום הרלוונטי.

שימו לב שבמידה ואנו לא נשתמש ב-SCSS או Less, ניתן פשוט להריץ את הסיפרייה על קבצי CSS רגילים.
בנוסף, הקוד שבסוף יוצא הוא קובץ אשר הוא לא דחוס, לכן על מנת לדחוס אותו ניתן להשתמש בסיפרייה gulp-clean-css אשר למדנו עליה בחלקים הראשונים בסדרת אוטומציה עם Gulp.

סיכום

איחוד של Media Queries יכולה לחסוך בצורה משמעותית במשקל קבצי ה-CSS של האתר שלכם או של הפרוייקט שלכם.

בחלק הבא בסדרה נדבר על איך ניתן להזריק קבצי CSS ו-JavaScript בצורה אוטומטית לקבצי ה-HTML שלנו.