grunt-contrib-watch ব্যবহার করে ফাইল পর্যবেক্ষণ করা

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

grunt-contrib-watch কীভাবে কাজ করে

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

grunt-contrib-watch ব্যবহার করার ধাপ

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

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

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

Step 2: Gruntfile.js কনফিগারেশন করা

এখন Gruntfile.js ফাইলে এই প্লাগইনটি কনফিগার করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে watch টাস্ক ব্যবহার করা হয়েছে যাতে JavaScript ফাইল পরিবর্তন হলে স্বয়ংক্রিয়ভাবে uglify টাস্ক চালানো হয়।

module.exports = function(grunt) {

  // Grunt কনফিগারেশন
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Uglify কনফিগারেশন (JavaScript মিনিফিকেশন)
    uglify: {
      build: {
        src: 'src/js/app.js',
        dest: 'dist/js/app.min.js'
      }
    },

    // Watch কনফিগারেশন
    watch: {
      scripts: {
        files: ['src/js/*.js'],  // ফাইল গুলি পর্যবেক্ষণ করবে
        tasks: ['uglify'],       // ফাইল পরিবর্তন হলে uglify টাস্ক চালাবে
        options: {
          spawn: false,  // ফাইল পরিবর্তন হলে টাস্ক রান করতে দেরি হবে না
        },
      },
    },
  });

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

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

Step 3: grunt কমান্ড চালানো

এখন আপনি যখন grunt কমান্ড চালাবেন, তখন Grunt আপনার src/js/*.js ফাইলগুলো পর্যবেক্ষণ করবে। ফাইলগুলিতে কোন পরিবর্তন হলে এটি স্বয়ংক্রিয়ভাবে uglify টাস্ক চালাবে, যার মাধ্যমে আপনার JavaScript ফাইল মিনিফাই হয়ে যাবে।

grunt

এটি চালানোর পর, আপনি যখন src/js/app.js ফাইলটি সম্পাদনা করবেন, তখন uglify টাস্ক স্বয়ংক্রিয়ভাবে চালানো হবে এবং dist/js/app.min.js ফাইলটি আপডেট হবে।

Watch টাস্ক কনফিগারেশন এর অতিরিক্ত অপশন

grunt-contrib-watch প্লাগইন কনফিগারেশনে বিভিন্ন অপশন যোগ করা যেতে পারে যা আপনাকে আরও বেশি নিয়ন্ত্রণ প্রদান করে। কিছু গুরুত্বপূর্ণ অপশন:

• files: যে ফাইলগুলো পর্যবেক্ষণ করতে চান তা উল্লেখ করুন। আপনি একাধিক ফাইল বা ডিরেক্টরি উল্লেখ করতে পারেন।
• tasks: কোন টাস্কগুলি চালানো হবে তা নির্ধারণ করুন।
• options: বিভিন্ন অপশন কনফিগার করতে পারেন যেমন spawn, atBegin, livereload ইত্যাদি।

উদাহরণ: বিভিন্ন ধরনের ফাইল পর্যবেক্ষণ

watch: {
  css: {
    files: ['src/css/*.css'],  // CSS ফাইলগুলো পর্যবেক্ষণ করবে
    tasks: ['cssmin'],         // CSS মিনিফিকেশন টাস্ক চালাবে
  },
  js: {
    files: ['src/js/*.js'],    // JavaScript ফাইলগুলো পর্যবেক্ষণ করবে
    tasks: ['uglify'],         // JavaScript মিনিফিকেশন টাস্ক চালাবে
  },
  livereload: {
    files: ['*.html', 'src/css/*.css', 'src/js/*.js'], // HTML, CSS, JS ফাইলগুলো পর্যবেক্ষণ
    options: {
      livereload: true,         // ফাইল পরিবর্তন হলে লাইভ রিলোড করবে
    },
  },
}

এখানে, একাধিক watch টাস্ক কনফিগার করা হয়েছে যেখানে CSS ফাইল পরিবর্তন হলে cssmin টাস্ক, JavaScript ফাইল পরিবর্তন হলে uglify টাস্ক এবং HTML, CSS, JavaScript ফাইল পরিবর্তন হলে livereload চালানো হবে।

উপসংহার

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