استفاده از Imagemin با Grunt

کیتی همپنیوس
Katie Hempenius
X

پلاگین Imagemin Grunt را راه اندازی کنید

این اشکال قبلاً شامل grunt ، grunt-cli و افزونه grunt-contrib-imagemin است. برای افزودن پیکربندی Imagemin، باید فایل gruntfile.js خود را ویرایش کنید.

  • روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  • در gruntfile.js ، کامنت //Add configuration here با این بلوک کد جایگزین کنید:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

این بلوک کد به Grunt می گوید که کدام فایل ها باید با Imagemin فشرده شوند.

  • dynamic نشان می دهد که لیست فایل هایی که باید فشرده شوند به صورت پویا با تطبیق نام فایل ها با الگوی فایل مشخص شده ایجاد می شود.

  • الگوی فایل {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} با تمام تصاویر JPEG و PNG موجود در فهرست images/ مطابقت دارد.

  • وظیفه Imagemin را با اضافه کردن این خط بلافاصله قبل از grunt.registerTask(...) بارگیری کنید:
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • در نهایت، Imagemin را به عنوان وظیفه پیش‌فرض Grunt با جایگزین کردن /* list plugins here */ با 'imagemin' اضافه کنید. اکنون آن خط باید به شکل زیر باشد:
grunt.registerTask('default', ['imagemin']);

✔︎ ورود

فایل کامل gruntfile.js اکنون باید به شکل زیر باشد:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

پیکربندی Imagemin خود را سفارشی کنید

imagemin-pngquant یک افزونه برای تعیین سطوح کیفیت فشرده سازی است. ما قبلاً imagemin-pngquant در فایل package.json به این پروژه اضافه کرده ایم تا بتوانید از آن برای فشرده سازی PNG های خود استفاده کنید. برای استفاده از آن، افزونه را اعلام کنید و سطح کیفیت فشرده سازی را در Gruntfile خود مشخص کنید.

  • پلاگین imagemin-pngquant را با افزودن این خط به بالای gruntfile.js خود اعلام کنید:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • با افزودن ویژگی options به شی imagemin ، تنظیماتی را برای فشرده سازی تصاویر PNG اضافه کنید. این ویژگی options باید به شکل زیر باشد:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

این کد به Imagemin می گوید که PNG ها را با استفاده از افزونه Pngquant فشرده کند. فیلد quality از محدوده min و max برای تعیین سطح فشرده سازی استفاده می کند - 0 کمترین و 1 بالاترین است. برای اینکه همه تصاویر را مجبور کنید با کیفیت 50% فشرده شوند، 0.5 به عنوان مقدار حداقل و حداکثر ارسال کنید.

✔︎ ورود

فایل gruntfile.js شما اکنون باید به شکل زیر باشد:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

اما در مورد JPEG ها چطور؟ این پروژه همچنین دارای تصاویر JPEG است، بنابراین باید نحوه فشرده سازی آنها را نیز مشخص کنید.

پیکربندی Imagemin خود را سفارشی کنید (ادامه دارد)

برای فشرده سازی تصاویر JPEG از افزونه imagemin-mozjpeg که قبلا برای شما نصب شده است استفاده کنید.

  • پلاگین imagemin-mozjpeg را با قرار دادن این خط در بالای gruntfile.js خود اعلام کنید.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • سپس، mozjpeg({quality: 50}) به آرایه موجود در شی options اضافه کنید. آن آرایه اکنون باید به شکل زیر باشد:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ ورود

فایل gruntfile.js شما اکنون باید به شکل زیر باشد:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Grunt را اجرا کنید و نتایج را با Lighthouse تأیید کنید

  1. روی دکمه Tools کلیک کنید.
  2. سپس روی دکمه Console کلیک کنید.
  3. Grunt را با تایپ دستور زیر در کنسول اجرا کنید:
grunt

وقتی Grunt کامل شد، باید پیامی مانند این را در کنسول ببینید:

Minified 6 images (saved 667 kB - 66.5%)

هورا! این نتایج بسیار بهتر است.

در نهایت، ایده خوبی است که از Lighthouse برای تأیید تغییراتی که به تازگی ایجاد کرده اید استفاده کنید. ممیزی عملکرد "تصاویر با کدگذاری کارآمد" Lighthouse به شما اطلاع می دهد که آیا تصاویر JPEG در صفحه شما به طور مطلوب فشرده شده اند یا خیر.

  • برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  • ممیزی عملکرد Lighthouse (Lighthouse > Options > Performance) را روی نسخه زنده Glitch خود اجرا کنید و بررسی کنید که ممیزی "Efficiently encode images" تایید شده است.

گذراندن ممیزی "تصاویر با کدگذاری کارآمد" در Lighthouse

موفقیت! شما از Imagemin برای فشرده سازی بهینه تصاویر در صفحه خود استفاده کرده اید.