המשימה: דחיסת תמונות באמצעות 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

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

 

= 6 + 8