אוטומציה עם Gulp: שימוש ב-Live Reload

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

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

השלב הראשון הוא להתקין את הסיפריות הרלוונטית, לצורך ההדגמה, אנחנו נתקין גם את הסיפריות של SCSS ו-JavaScript על מנת להציג איך זה יעבוד. נפתח את הטרמינל וננווט לתיקיה בה נמצא הקובץ package.json ונקליד את הפקודה הבאה:

npm install --save-dev gulp-sass gulp-concat gulp-uglify gulp-concat gulp-sourcemaps browser-sync

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

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

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var scss = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var concat = require( 'gulp-concat' );
var sourcemaps = require( 'gulp-sourcemaps' );
let browsersync = require( 'browser-sync' ).create();

// Variables
var SCSS_SRC = '__src/scss/**/*.scss';
var SCSS_DIST = 'assets/css';
var JS_SRC = '__src/js/*.js';
var JS_VENDOR = '__src/js/vendor/*.js';
var JS_DIST = 'assets/js';

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

	return gulp
		.src( SCSS_SRC )
		.pipe( scss( {
			outputStyle : 'compressed'
		} ) )
		.pipe( concat( 'styles.min.css' ) )
		.pipe( gulp.dest( SCSS_DIST ) );

} );

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 ) );

} );

עד כאן הכל היה משהו מוכר, ואם משהו לא מובן, ממליץ לכם להסתכל במאמרים הקודמים בסדרת ״אוטומציה עם Gulp״.

שלב שלישי – הגדרת Live Reload

בשלב זה אנחנו נגדיר את Live Reload ונחבר אותו לאתר שלנו, נפתח את הקובץ gulpfile.js ונוסיף את הקוד הבא בסופו:

gulp.task( 'browser-sync', function () {

	browsersync.init( {
		proxy : 'http://localhost/project_dir/',
		port : 8888,
		injectChanges : true
	} );

	gulp.watch( [ '**/*.html', '**/*.php' ] ).on( 'change', browsersync.reload );
	gulp.watch( SCSS_SRC, [ 'build-scss' ] );
	gulp.watch( JS_SRC, [ 'build-js' ] );

} );

אוקיי, אז יש לנו פה בעצם 2 דברים חדשים – ההגדרה של BrowserSync והפקודה watch().

הגדרת BrowserSync

על מנת להגדיר את ה-Live Reload אנחנו משתמשים בספרייה BrowserSync, וכאשר אנו קוראים לספרייה אנחנו מעביר לה אובייקט עם שלושה ערכים:

1. proxy – הכתובת הזאת היא בעצם הכתובת בא ניתן לגשת לפרוייקט שלנו, במקרה הזה תחת התיקייה הראשית של השרת הלוקלי שלנו יש תיקייה בשם project_dir אשר בה נמצאים כל הקבצים. ניתן לשנות את זה אפילו לדומיין בהנחה שעשיתם הגדרה בקובץ hosts.
2. port – הפורט אשר בשילוב עם הכתובת יוצג האתר שאנו עובדים עליו, מומלץ להימנע משימוש בפורט 80 מכיוון שלרוב הוא הפורט של Apache בשרת הלוקלי.
3. injectChanges – נעביר את הערך true על מנת שהשינויים יוזרקו ישירות לעמוד.

פונקצייה watch

פונקציית watch() מאפשרת לנו לגרום למשימות שלנו לרוץ כל פעם שהסקריפט מזהה שינוי בקבצים, ואז מריץ את המשימה שאנחנו מגדירים.

הפונקציה מקבלת שני פרמטרים, הראשון הוא הקבצים עליהם נרצה ״לשמור״ (הכוונה היא לנטר), ופרמטר שני הוא מערך של שמות המשימות אותם נרצה להריץ.

הרצת המשימה

על מנת להריץ את המשימה נריץ את הפקודה הבאה בטרמינל:

gulp browser-sync

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

סיכום

בחלק זה למדנו איך להשתמש ב-BrowserSync על מנת לרענן את האתר בדפדפן כל פעם שאנו עושים שינוי של קבצי ה-CSS וה-JavaScript של האתר. מלבד זת למדנו על פונקצייה watch() אשר מאפשרת לנו להריץ משימות אוטומטית כאשר הסקריפט מזהה שינוי בקבצי ה-CSS, SCSS או ה-JavaScript של הפרוייקט.

בחלק הבא נלמד איך לבנות Sprite Sheet אוטומטית על מנת לחסוך קריאות HTTP כאשר יש לנו באתר כמה תמונות קטנות.