Multi-target Configuration

Grunt একটি অত্যন্ত শক্তিশালী টাস্ক রানার, যা বিভিন্ন কাজ অটোমেট করতে ব্যবহৃত হয়। কখনো কখনো, আপনি একই টাস্কে একাধিক কনফিগারেশন বা multi-target configuration ব্যবহার করতে চাইবেন, যেখানে একাধিক টার্গেটের জন্য আলাদা কনফিগারেশন তৈরি করা হয়। এর মাধ্যমে একাধিক ফাইল, ডিরেক্টরি বা সেটিংসের জন্য একযোগভাবে টাস্ক চালানো সম্ভব হয়।

Multi-target configuration ব্যবহার করলে আপনি একক টাস্কের মধ্যে একাধিক ফাইল সেট বা কনফিগারেশন পরিচালনা করতে পারেন, যা প্রোজেক্টে পুনরাবৃত্তি কমায় এবং কোডের গঠন আরও পরিষ্কার করে।

Multi-target Configuration এর সুবিধা

1. একাধিক আউটপুট: একাধিক আউটপুট বা ফাইল পাথের জন্য একই টাস্ক চালানো।
2. কমপ্লেক্স কনফিগারেশন: একাধিক কনফিগারেশন ফাইল বা ডিরেক্টরির জন্য একযোগে কাজ করার সুবিধা।
3. কোডের পুনঃব্যবহার: একই টাস্কের মধ্যে একাধিক টার্গেটের জন্য কনফিগারেশন ব্যবহার করা যায়, যা কোড পুনঃব্যবহারকে উৎসাহিত করে।

Multi-target Configuration কিভাবে কাজ করে?

Grunt-এ multi-target configuration ব্যবহার করতে, প্রথমে আপনাকে টাস্কে একাধিক টার্গেট ডিফাইন করতে হবে। প্রতিটি টার্গেটের জন্য আলাদা আলাদা কনফিগারেশন সেট করা যাবে। নিচে একটি উদাহরণ দেওয়া হলো:

উদাহরণ: Multi-target Configuration এর মাধ্যমে JavaScript এবং CSS মিনিফিকেশন

ধরা যাক, আপনি দুটি আলাদা আউটপুট ফাইলের জন্য JavaScript এবং CSS মিনিফাই করতে চান।

১. Gruntfile.js কনফিগারেশন

module.exports = function(grunt) {

  grunt.initConfig({
    // JavaScript মিনিফিকেশন টাস্ক
    uglify: {
      options: {
        mangle: false
      },
      dev: {
        files: {
          'dist/js/app.min.js': ['src/js/app.js', 'src/js/helpers.js']  // dev টার্গেট
        }
      },
      prod: {
        files: {
          'dist/js/app.prod.min.js': ['src/js/app.js', 'src/js/helpers.js']  // prod টার্গেট
        }
      }
    },

    // CSS মিনিফিকেশন টাস্ক
    cssmin: {
      dev: {
        files: [{
          expand: true,
          cwd: 'src/css',
          src: ['*.css', '!*.min.css'],
          dest: 'dist/css',
          ext: '.min.css'
        }]
      },
      prod: {
        files: [{
          expand: true,
          cwd: 'src/css',
          src: ['*.css', '!*.min.css'],
          dest: 'dist/css',
          ext: '.prod.min.css'
        }]
      }
    }
  });

  // প্লাগইন লোড করা
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // ডিফল্ট টাস্ক নিবন্ধন
  grunt.registerTask('default', ['uglify', 'cssmin']);
};

২. কনফিগারেশন ব্যাখ্যা

1. uglify টাস্কে দুটি টার্গেট (dev এবং prod) নির্ধারণ করা হয়েছে। প্রতিটি টার্গেটের জন্য আলাদা আউটপুট ফাইল তৈরি হবে।
   • dev: app.min.js ফাইল তৈরি করবে।
   • prod: app.prod.min.js ফাইল তৈরি করবে।
2. cssmin টাস্কে দুটি টার্গেট (dev এবং prod) রয়েছে, যেগুলোর জন্য আলাদা আউটপুট ফাইল তৈরি হবে।
   • dev: .min.css ফাইল তৈরি করবে।
   • prod: .prod.min.css ফাইল তৈরি করবে।

এভাবে, একই টাস্কের মধ্যে একাধিক আউটপুট ফাইল তৈরি করা যাবে।

৩. টাস্ক চালানো

এই কনফিগারেশনটি ব্যবহার করে, আপনি grunt কমান্ড চালালে উল্লিখিত সব টাস্ক একসঙ্গে চলে যাবে। যদি আপনি নির্দিষ্ট টার্গেট চালাতে চান, তবে তা grunt কমান্ডের সাথে যুক্ত করে চালাতে পারেন:

• dev টাস্ক চালানো:

  grunt uglify:dev cssmin:dev
  

• prod টাস্ক চালানো:

  grunt uglify:prod cssmin:prod
  

এভাবে, আপনি টাস্কের বিভিন্ন টার্গেট এবং কনফিগারেশন চালাতে পারবেন।

Multi-target Configuration এর অন্যান্য ব্যবহার

১. একাধিক ডিরেক্টরি বা ফাইল পাথের জন্য কনফিগারেশন

আপনি যদি একাধিক ডিরেক্টরি বা ফাইল পাথের জন্য একযোগে টাস্ক চালাতে চান, তবে multi-target configuration ব্যবহার করতে পারেন। উদাহরণস্বরূপ, JavaScript এবং CSS ফাইলের মিনিফিকেশন একাধিক ডিরেক্টরি থেকে।

uglify: {
  dev: {
    files: {
      'dist/js/app.min.js': ['src/js/**/*.js', 'lib/js/**/*.js']
    }
  },
  prod: {
    files: {
      'dist/js/app.prod.min.js': ['src/js/**/*.js', 'lib/js/**/*.js']
    }
  }
}

এখানে, src/js/**/*.js এবং lib/js/**/*.js ফাইলগুলো উভয় টার্গেটে যুক্ত করা হয়েছে।

২. একাধিক টাস্কের জন্য আলাদা কনফিগারেশন

এছাড়াও, আপনি যদি একাধিক টাস্কের জন্য আলাদা কনফিগারেশন রাখতে চান তবে multi-target configuration এর মাধ্যমে সেটা করতে পারেন। উদাহরণস্বরূপ, আপনার grunt-contrib-copy এবং grunt-contrib-clean টাস্কের জন্য আলাদা টার্গেট রাখতে পারেন।

copy: {
  dev: {
    files: [
      {expand: true, src: ['src/js/*.js'], dest: 'dist/js/', flatten: true},
      {expand: true, src: ['src/css/*.css'], dest: 'dist/css/', flatten: true}
    ]
  },
  prod: {
    files: [
      {expand: true, src: ['src/js/*.js'], dest: 'dist/js/', flatten: true},
      {expand: true, src: ['src/css/*.css'], dest: 'dist/css/', flatten: true}
    ]
  }
}

এখানে dev এবং prod টার্গেট আলাদা ফোল্ডার বা আউটপুট ফাইল গঠন করবে।

সারাংশ

Multi-target configuration ব্যবহার করা গ্রান্টের একটি শক্তিশালী ফিচার যা ডেভেলপারদের একাধিক টাস্ক এবং কনফিগারেশন পরিচালনা করতে সাহায্য করে। এটি আপনার প্রোজেক্টে বিভিন্ন আউটপুট, ফাইল এবং ডিরেক্টরির জন্য একযোগে কাজ করার সুযোগ দেয়, ফলে কোডের পুনরাবৃত্তি কমে এবং টাস্কগুলি আরও কার্যকরীভাবে পরিচালিত হয়। Grunt এর এই বৈশিষ্ট্যটি ব্যবহার করে আপনি প্রোজেক্টের উন্নয়ন প্রক্রিয়া আরও সহজ ও পরিষ্কার করতে পারেন।