אוטומציה עם Gulp: כיווץ ואיחוד קבצי CSS

בחלק השלישי בסדרת המאמרים "אוטומציה עם Gulp", נלמד על איך לקחת מספר קבצי CSS של הפרוייקט שלנו, לדחוס אותם ולאחד אותם לקובץ CSS אחד על מנת לצמצם את כמות קריאות ה-HTTP שהדפדפן יבצע בעת טעינה של האתר שלנו.

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

בשלב הראשון ננווט לתיקיית הפרוייקט שלנו בטרמינל (איזה שנמצא הקובץ package.json) ונקליד את הפעולה הבאה:

npm install --save-dev gulp-clean-css gulp-concat

פעולה זאת תתקין לנו שתי סיפריות, האחת לכיווץ קבצי CSS והשנייה לאיחוד כל הקבצים הדחוסים לקובץ אחד.

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

השלב השני הוא ליצור את המשימה, נפתח את קובץ המשימות וההגדרות gulpfile.js ונדרוס את הקוד הקיים בקוד הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var minifyCSS = require( 'gulp-clean-css' );
var concat = require( 'gulp-concat' );

// Variables
var CSS_SRC = '__src/css/*.css';
var CSS_DIST = 'assets/css';

// Tasks
gulp.task( 'minify-css', function() {

  return gulp
          .src( CSS_SRC )
          .pipe( minifyCSS() )
          .pipe( concat( 'styles.min.css' ) )
          .pipe( gulp.dest( CSS_DIST ) );

} );

בשורות הראשונות של הקובץ אנחנו קוראים ל-Dependencies של הפרוייקט שלנו, ולאחר מכן אנחנו מגדירים משתנה אשר שומר את הנתיב לתיקייה שבה נמצאים קבצים ה-CSS שלנו (בדוגמא שלנו __src/css/**.css) ואת הנתיב לתיקייה בא יישמר קובץ ה-CSS הדחוס שלנו (בדוגמא שלנו assets/css).

לאחר מכן אנחנו יוצרים משימה חדשה בשם minify-css ואז אנחנו מגדירים ל-Gulp לגשת לתיקייה של קבצי ה-CSS שלנו, לאחר מכן אנחנו מפעילים את הסיפרייה שאחראית לכווץ את קבצי ה-CSS. לאחר הכיווץ של הקבצים, אנו קוראים לסיפרייה אשר תאחד את כל הקבצים לקובץ אחד ותשמור אותו בשם styles.min.css תחת התיקייה שקבענו.

כל מה שנותר לעשות הוא להריץ את המשימה ולראות את התוצאה, נעשה זאת ע״י הרצת הפקודה הבאה בטרמינל:

gulp minify-css

כעת אם נכנס לתיקייה assets/css נראה את קובץ ה-CSS הדחוס.

חשוב! כאשר אנחנו מריצים את המשימה, הפעולות לא מתבצעות על קבצי המקור, כך שאין לחשוש שהם יהרסו או יושחטו.

סיכום

במאמר זה למדנו איך לקחת מספר קבצי CSS ולכווץ אותם ולאחד אותם לקובץ CSS אחד. דחיסת קבצי CSS ואיחודם לקובץ אחד זהו צעד חשוב כאשר מפתחים אתר, מכיוון שהוא משפיע על זמני טעינת האתר שלנוף, הן מבחינת כמות קריאות ה-HTTP המבוצעות ומשקלן. במאמר הבא נלמד איך לקמפל קבצי SCSS / SASS / LESS לקובץ CSS אחד.