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

בחלק זה נדבר על איך לקחת את קבצי ה-JavaScript של הפרוייקט שלנו, ולדחוס אותם ולאחד אותם לקובץ JavaScript אחד ראשי על מנת לחוץבמשאבי שרת ועל מנת להאיץ את טעינת האתר. בנוסף נדבר על מה הם Sourcemaps וכיצד משתמשים בהם.

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

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

npm install --save-dev gulp-uglify gulp-concat gulp-sourcemaps

אנחנו מתקינים שלוש סיפריות, הראשונה ארחאית לדחיסה, השנייה לאיחוד הקבצים ולבסוף השלישית אחראית לייצור Sourcemaps.

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

כעת נפתח את הקובץ gulpfile.js ונכתוב את המשימה אשר תדחוס ותאחד את קבצי ה-JavaScript של הפרוייקט שלנו, לכן נחליף את התוכן של הקובץ בקוד הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var concat = require( 'gulp-concat' );
var sourcemaps = require( 'gulp-sourcemaps' );

// Variables
var JS_SRC = '__src/js/*.js';
var JS_VENDOR = '__src/js/vendor/*.js';
var JS_DIST = 'assets/js';

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

	return gulp
		.src( [ JS_VENDOR, JS_SRC ] )
		.pipe( sourcemaps.init() )
		.pipe( uglify() )
		.pipe( concat( 'scripts.min.js' ) )
		.pipe( sourcemaps.write( './' ) )
		.pipe( gulp.dest( JS_DIST ) );

} );

בניגוד למאמרים הקודמים אנחנו כאן מעבירים לפונקציה source() מערך מכיוון שאנחנו רוצים שסיפריות JavaScript כגון jQuery יופיעו בקובץ הדחוס לפני הקוד שלנו כדי שהקוד שנו לא ״ישבר״. לאחר מכן אנחנו לוקחים את כל הקבצים הדחוסים ודוחסים אותם לקובץ אחד בשם scripts.min.js ושומרים אותו בנתיב assets/js.

בנוסף, אנחנו מוסיפים תמיכה ב-Sourcemaps, ע״י שימוש בשתי פקודות, האחת לפני דחיסת הקבצים והשנייה לאחר איחוד הקבצים. ה-Sourcemaps מאפשרים לנו לדבג (Debug) את הקוד JavaScript שלנו בזמן פיתוח, זה טוב מכיוון שאם תוצג לנו שגיאה ולא יהיו לנו Sourcemaps הדפדפן יתריע שהשגיאה היא בשורה 1 תמיד. במידה והדפדפן מזהה שיש Sourcemaps, הוא יודע להתריע באיזה קובץ ובאיזה שורה בדיוק יש את הבעיה, מה שיאפשר לנו תהליך דיבאג יותר מהיר.

שימו לב! ניתן להשתמש ב-Sourcemaps גם בעבודה עם CSS או עם SCSS או Less.

סיכום

בחלק זה למדנו איך לקחת קבצי JavaScript לדחוס אותם ולאחד אותם לקובץ אחד על מנת להאיץ את מהירות טעינת האתר ולחסוך במשאבי שרת. מלבד זאת למדנו איך להטמיע Sourcemaps על מנת לאפשר תהליך דיאבגינג מהיר ויעיל.
בחלק הבא במאמר נלמד איך לעבוד עם Live Reload על מנת לראות שינויים באתר מבלי שנצטרך כל פעם ללכת לדפדפן ולרענן ידנית.