ग्रंट के साथ Imagemin का इस्तेमाल करना

Katie Hempenius
Katie Hempenius
X

Imagemin Grunt प्लगिन को सेटअप करें

इस ग्लिच में grunt, grunt-cli, और grunt-contrib-imagemin पहले से शामिल हैं प्लग इन. Imagemin के लिए कॉन्फ़िगरेशन जोड़ने के लिए, आपको संपादित करने के लिए gruntfile.js फ़ाइल.

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  • gruntfile.js में, //Add configuration here टिप्पणी बदलें इस कोड ब्लॉक का इस्तेमाल करके:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

यह कोड ब्लॉक, ग्रंट को बताता है कि किन फ़ाइलों को Imagemin के साथ कंप्रेस किया जाना चाहिए.

  • dynamic से पता चलता है कि कंप्रेस की जाने वाली फ़ाइलों की सूची डाइनैमिक होगी फ़ाइल नामों का मिलान करके तय किए गए फ़ाइल पैटर्न से जनरेट होता है.

  • फ़ाइल पैटर्न {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} images/ डायरेक्ट्री में मौजूद सभी JPEG और PNG इमेज मेल खाएगी.

  • इस लाइन को ठीक पहले जोड़कर इमेजमिन टास्क लोड करें grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • आखिर में, /* list plugins here */ टिप्पणी की जगह 'imagemin' टिप्पणी करके 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, कंप्रेशन क्वालिटी लेवल तय करने वाला प्लगिन है. हमने package.json में पहले ही इस प्रोजेक्ट में imagemin-pngquant को जोड़ दिया है फ़ाइल अपलोड करें ताकि आप अपने PNG फ़ॉर्मैट को कंप्रेस करने के लिए इसका इस्तेमाल कर सकें. इसका इस्तेमाल करने के लिए, प्लगिन का एलान करें और अपनी ग्रंटफ़ाइल में कंप्रेशन क्वालिटी लेवल तय करें.

  • इस लाइन को अपने पेज के सबसे ऊपर जोड़कर, imagemin-pngquant प्लगिन के बारे में बताएं gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • PNG इमेज को कंप्रेस करने की सेटिंग जोड़ने के लिए,options imagemin ऑब्जेक्ट. वह options प्रॉपर्टी कुछ ऐसी दिखनी चाहिए:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

यह कोड, Imagemin को Pngquant प्लगिन का इस्तेमाल करके PNG को कंप्रेस करने के लिए कहता है. कॉन्टेंट बनाने 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 कॉन्फ़िगरेशन को कस्टमाइज़ करें (जारी)

इन कामों के लिए, आपके लिए पहले से इंस्टॉल किए गए imagemin-mozjpeg प्लगिन का इस्तेमाल करें JPEG इमेज कंप्रेस करें.

  • इस लाइन को अपने सबसे ऊपर रखकर, imagemin-mozjpeg प्लगिन का एलान करें gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • इसके बाद, options ऑब्जेक्ट में मौजूद कलेक्शन में mozjpeg({quality: 50}) जोड़ें. वह अरे अब कुछ ऐसा दिखना चाहिए:
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']);

ग्रंट दौड़ें और लाइटहाउस की मदद से नतीजों की पुष्टि करें

  1. टूल बटन पर क्लिक करें.
  2. इसके बाद, कंसोल बटन पर क्लिक करें.
  3. कंसोल में नीचे दिया गया कमांड टाइप करके, ग्रंट चलाएं:
grunt

ग्रंट के पूरा होने पर आपको कंसोल में इस तरह का मैसेज दिखेगा:

Minified 6 images (saved 667 kB - 66.5%)

बहुत बढ़िया! ये नतीजे काफ़ी बेहतर होते हैं.

आखिर में, आपके किए गए बदलावों की पुष्टि करने के लिए, लाइटहाउस का इस्तेमाल करना एक अच्छा रहेगा बनाया गया. लाइटहाउस की "इमेज को बेहतर तरीके से एन्कोड करना" परफ़ॉर्मेंस ऑडिट से, जानें कि आपके पेज पर JPEG इमेज सही तरीके से कंप्रेस की गई हैं या नहीं.

  • साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन.
  • इन पर लाइटहाउस परफ़ॉर्मेंस ऑडिट (लाइटहाउस > विकल्प > परफ़ॉर्मेंस) चलाएं अपने Glitch का लाइव वर्शन देखें और पुष्टि करें कि " इमेज" ऑडिट पास किया गया था.

'इमेज को बेहतर तरीके से एन्कोड करें' पास किया जा रहा है लाइटहाउस में ऑडिट

हो गया! आपने अपने पेज पर इमेज को बेहतर तरीके से कंप्रेस करने के लिए Imagemin का इस्तेमाल किया है.