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

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

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

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

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

המשימה: דחיסת תמונות באמצעות gulp

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

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

נעבור לעניין שלשמו התכנסנו.

כיצד לדחוס תמונות באמצעות gulp?

כדי לדחוס תמונות נשתמש בחבילה imagemin, שאותה נתקין, כמו במדריכים קודמים, באמצעות npm.


$ npm install --save-dev gulp-imagemin

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

  1. נתחיל בזה שנוסיף לרשימת התלויות את החבילה שהורדנו.
  2. נוסיף משימה ששמה "img" (או איזה שם שאתם רוצים).
  3. במשימה "img", שיצרנו בצעד הקודם, נגדיר את התיקייה שבה ישבו התמונות המקוריות לפני הדחיסה, ואת התיקייה שאליה מיועדות התמונות אחרי הדחיסה.
    במקרה של הקוד להלן, התמונות המקוריות ישבו בתיקייה- app/src/img/ , והתמונות, לאחר הדחיסה, יועברו לתיקייה app/img.
  4. כדי להפוך את המשימה למשימה ברירת מחדל, נוסיף אותה לרשימת המשימות הדיפולטיות.

כך נראה קובץ ה-gulpfile.js.

/** gulpfile.js **/

// Requirements
var gulp          = require('gulp'),
      imagemin = require('gulp-imagemin');

// Compress images task
gulp.task('img', function(){
	gulp.src(['app/src/img/*'])
	      .pipe(imagemin())
	      .pipe(gulp.dest('app/img'));
});

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

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

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

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

 

= 4 + 8