נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

כיצד gulp ירענן אוטומטית את הדפדפן כשאנו עורכים את הקבצים?

מחבר:
בתאריך:

מדריך זה מסתמך על ידע קיים ב-gulp. אז אם אין לכם ידע ב-gulp או שאתם זקוקים לרענון של הידע הקיים, עדיף שתתחילו מקריאת המדריכים הקודמים בסדרה:

המשימה: רענון אוטומטי של הדפדפן בכל פעם שעורכים את הקבצים

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

נתחיל מזה שנוריד ונתקין את ההרחבה לדפדפן ששמה LiveReload מחנות האפליקציות של הדפדפן החביב עליכם. במקרה שלי, אני מוריד את ההרחבה עבור הדפדפן כרום מהקישור הבא: הורדת LiveReload מ-google app store.

אחרי ההורדה וההתקנה על הדפדפן, צריך להרשות להרחבה לגשת ל-url. לצורך כך, נלך לניהול ההרחבות של הדפדפן (כדי להגיע לניהול ההרחבות של כרום, הקלידו את הכתובת chrome://extensions בשורת הפקודות ), ונסמן את האפשרות: Allow access to file urls עבור LiveReload אחרת זה לא יעבוד.

כיצד להרשות להרחבה לגשת ל-url

 

 

בנוסף, אנחנו צריכים להתקין את חבילת ה-npm אצלנו באתר, אז משורת הפקודות:


$ npm install --save-dev gulp-livereload

אחרי שהורדנו את החבילה, נערוך את הקובץ gulpfile.js כדי שנוכל להשתמש בחבילה.

  1. נתחיל בזה שנוסיף לרשימת התלויות את החבילה.
  2. נוסיף משימה ששמה "livereload".
  3. נוסיף למשימות sass, scripts שכתבנו במדריכים הקודמים pipe נוסף שיריץ את livereload בכל פעם שמעדכנים את הקבצים.(במדריך זה, הוספתי רק למשימה sass כדי לשמור את המדריך פשוט כמה שניתן, אבל הבנתם את הכוונה).

כך נראה קובץ ה-gulpfile.js שכולל עכשיו את ה-livereload:

// Requirements
var gulp   = require('gulp'),
    sass   = require('gulp-sass'),
    livereload = require('gulp-reload');

// Sass task
gulp.task('sass', function(){
	gulp.src(['app/src/**/*.scss'])
	    .pipe(sass())
	    .pipe(gulp.dest('app/css'))
                .pipe(livereload({ start: true }));
});

// Watch task
gulp.task('watch', function(){
	gulp.watch('app/src/sass/*.scss',['sass']);
})

// Default task
gulp.task('default', ['sass','watch']);

 

כדי שזה יעבוד באתר שאתם מפתחים, צריך להקפיד להפעיל את ההרחבה liveReload על ידי לחיצה על האייקון שמופיע לצד שורת הכתובות בדפדפן.

לא לשכוח להפעיל את ההרחבה עבור האתר שלכם על ידי לחיצה על האייקון של הדפדפן

 

במדריך הבא, נסכם את סידרת ה-gulp בזה שיהיה לנו סקריפט מלא שמטפל בכל ההיבטים של ניהול צד הלקוח, וגם נלמד כיצד לטפל בשגיאות.

לכל מדריכי ה-gulp.js

הוסף תגובה חדשה

 

= 5 + 4