প্রিপ্রসেসর ফাইল পরিবর্তন পর্যবেক্ষণ

Grunt এর মাধ্যমে প্রিপ্রসেসর ফাইল পরিবর্তন পর্যবেক্ষণ করা (watching files for changes) একটি গুরুত্বপূর্ণ ফিচার, যা ডেভেলপারদের কোডে পরিবর্তন হলে অটোমেটিকভাবে টাস্ক চালানোর সুবিধা দেয়। উদাহরণস্বরূপ, যখন আপনি SCSS, LESS, বা TypeScript ফাইল সম্পাদনা করবেন, তখন Grunt সেই ফাইলগুলির পরিবর্তন লক্ষ্য করে স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট টাস্ক চালাবে (যেমন CSS কম্পাইলিং, JavaScript ট্রান্সপাইলিং ইত্যাদি)। এটি ডেভেলপমেন্ট প্রক্রিয়া দ্রুত ও কার্যকরী করে তোলে।

Grunt এ ফাইল পরিবর্তন পর্যবেক্ষণ করার জন্য grunt-contrib-watch প্লাগইন ব্যবহার করা হয়। এটি আপনাকে নির্দিষ্ট ফাইলের উপর নজর রাখতে এবং সেগুলির পরিবর্তন হলে স্বয়ংক্রিয়ভাবে টাস্ক চালাতে সহায়তা করে।

প্রিপ্রসেসর ফাইল পরিবর্তন পর্যবেক্ষণ কিভাবে করবেন?

1. grunt-contrib-watch প্লাগইন ইনস্টল করা

প্রথমে, আপনাকে grunt-contrib-watch প্লাগইনটি আপনার প্রোজেক্টে ইনস্টল করতে হবে। এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install grunt-contrib-watch --save-dev

2. Gruntfile এ watch টাস্ক কনফিগার করা

Gruntfile এ watch টাস্ক কনফিগার করার মাধ্যমে আপনি নির্দিষ্ট ফাইল বা ডিরেক্টরির পরিবর্তন পর্যবেক্ষণ করতে পারেন এবং সেই পরিবর্তন অনুসারে একটি নির্দিষ্ট টাস্ক চালাতে পারবেন। উদাহরণস্বরূপ, আপনি যদি SCSS ফাইলের পরিবর্তন পর্যবেক্ষণ করতে চান, তাহলে আপনার Gruntfile এ এভাবে কনফিগারেশন করতে হবে:

module.exports = function(grunt) {
  grunt.initConfig({
    // SCSS ফাইল পরিবর্তন পর্যবেক্ষণ
    watch: {
      styles: {
        files: ['scss/**/*.scss'], // SCSS ফাইলের পরিবর্তন পর্যবেক্ষণ
        tasks: ['sass'],  // SCSS পরিবর্তন হলে sass টাস্ক চালাবে
        options: {
          livereload: true  // Live reload সক্রিয় করবে
        }
      }
    },

    // Sass কম্পাইলিং টাস্ক
    sass: {
      dist: {
        files: {
          'css/styles.css': 'scss/styles.scss'  // SCSS ফাইল CSS তে কম্পাইল হবে
        }
      }
    }
  });

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

  // ডিফল্ট টাস্ক রেজিস্টার করা
  grunt.registerTask('default', ['sass', 'watch']);
};

এই কনফিগারেশনে:

• watch টাস্ক SCSS ফাইলের পরিবর্তন অনুসরণ করে।
• যখনই SCSS ফাইল পরিবর্তন হবে, তখন sass টাস্কটি চালানো হবে, যা SCSS ফাইলটি CSS তে কম্পাইল করবে।

3. grunt watch কমান্ড চালানো

এখন আপনি grunt watch কমান্ড চালালে, Grunt অটোমেটিকভাবে আপনার নির্দিষ্ট ফাইলগুলি পর্যবেক্ষণ করতে শুরু করবে এবং যখনই SCSS ফাইলের কোনো পরিবর্তন হবে, তখন sass টাস্কটি চালানো হবে।

grunt watch

এই কমান্ডটি চালানোর পর, আপনার কনসোল এ পরিবর্তনগুলির জন্য নজর রাখা হবে। যখনই আপনি SCSS ফাইল পরিবর্তন করবেন, sass টাস্কটি স্বয়ংক্রিয়ভাবে রান করবে এবং CSS ফাইল আপডেট হবে।

অন্যান্য ফাইল পরিবর্তন পর্যবেক্ষণ

Grunt এ আপনি অন্যান্য ফাইল ধরনের পরিবর্তনও পর্যবেক্ষণ করতে পারেন। যেমন:

• JavaScript ফাইল: আপনি JavaScript ফাইলের পরিবর্তনও পর্যবেক্ষণ করতে পারেন এবং লিন্টিং বা কম্পাইলিং টাস্ক চালাতে পারেন।

  watch: {
    scripts: {
      files: ['js/**/*.js'],  // JavaScript ফাইলের পরিবর্তন পর্যবেক্ষণ
      tasks: ['jshint']  // JavaScript লিন্টিং টাস্ক
    }
  }
  

• HTML ফাইল: আপনি HTML ফাইলের পরিবর্তনেও watch টাস্ক ব্যবহার করতে পারেন এবং লাইভ রিলোড বা অন্যান্য টাস্ক চালাতে পারেন।

  watch: {
    html: {
      files: ['**/*.html'],  // HTML ফাইলের পরিবর্তন
      tasks: ['htmlmin']  // HTML মিনিফিকেশন টাস্ক
    }
  }
  

Live Reload

Grunt এর মাধ্যমে আপনি Live Reload সুবিধাও ব্যবহার করতে পারেন, যার মাধ্যমে আপনি যখন ফাইল পরিবর্তন করবেন তখন আপনার ব্রাউজার স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে এবং পরিবর্তনগুলো দেখতে পারবেন। grunt-contrib-watch প্লাগইনটি লাইভ রিলোড সক্রিয় করার জন্য livereload অপশন সরবরাহ করে।

options: {
  livereload: true  // লাইভ রিলোড সক্রিয় করা
}

সারাংশ

Grunt এর মাধ্যমে ফাইল পরিবর্তন পর্যবেক্ষণ করা উন্নত ডেভেলপমেন্ট প্রক্রিয়া তৈরি করে। grunt-contrib-watch প্লাগইন ব্যবহার করে আপনি SCSS, JavaScript, HTML বা অন্যান্য ফাইলের পরিবর্তন স্বয়ংক্রিয়ভাবে ট্র্যাক করতে পারেন এবং তার পরবর্তী টাস্কগুলো চালাতে পারেন। এটি ডেভেলপারদের তাদের কাজ দ্রুত এবং কার্যকরভাবে সম্পন্ন করতে সহায়তা করে।