בחלק זה נדבר על איך לקחת את קבצי ה-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 על מנת לראות שינויים באתר מבלי שנצטרך כל פעם ללכת לדפדפן ולרענן ידנית.

דור צוברי

מתכנת מגיל 13, ומתעסק עם וורדפרס מגיל 18, אוהב לפצח אתגרים ולפתח דברים מורכבים על בסיס וורדפרס. עצמאי מגיל 16, מרצה ובלוגר. בזמן הפנוי שלי אוהב מאוד לקרוא קומיקס של MARVEL.

דור צוברי

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. טל

    וואו תודה רבה! עזרת לי המון, המאמר מצויין.
    מחכה כבר למאמר הבא!

    1. מחבר
      דור צוברי

      שמח לשמוע!

  2. דודו

    למה לא להשתמש ב webpack? מה הייתרונות של gulp?

    1. מחבר
      דור צוברי

      כל אחד והכלים שנוח לו להשתמש בהם 🙂
      מתוכננת גם סדרה על Webpack.

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