ফাইল পরিবর্তনের সময় স্বয়ংক্রিয় টাস্ক চালানো

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

grunt-contrib-watch প্লাগইন

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

grunt-contrib-watch প্লাগইন ইনস্টলেশন

প্রথমে আপনাকে grunt-contrib-watch প্লাগইনটি ইনস্টল করতে হবে:

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

grunt-contrib-watch কনফিগারেশন

আপনি Gruntfile.js ফাইলে watch টাস্ক কনফিগার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      scripts: {
        files: ['js/*.js'],  // js ফোল্ডারে যেকোনো .js ফাইলের জন্য নজর রাখা হবে
        tasks: ['uglify'],   // ফাইল পরিবর্তন হলে 'uglify' টাস্ক চালানো হবে
        options: {
          spawn: false,       // এটা নিশ্চিত করে যে টাস্কটি একাধিকবার রান না হয়ে একবারেই চলবে
        },
      },
      css: {
        files: ['css/*.css'], // css ফোল্ডারে যেকোনো .css ফাইলের জন্য নজর রাখা হবে
        tasks: ['cssmin'],    // ফাইল পরিবর্তন হলে 'cssmin' টাস্ক চালানো হবে
      }
    },
    uglify: {
      my_target: {
        files: {
          'dist/js/output.min.js': ['js/input.js']
        }
      }
    },
    cssmin: {
      target: {
        files: {
          'dist/css/output.min.css': ['css/input.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
};

কনফিগারেশন বিশ্লেষণ

• watch টাস্কের মাধ্যমে js/*.js এবং css/*.css ফাইলগুলোকে পর্যবেক্ষণ করা হচ্ছে। অর্থাৎ, যেকোনো পরিবর্তন ঘটলে এগুলির জন্য নির্দিষ্ট টাস্কগুলো চলবে।
• uglify টাস্কটি JavaScript ফাইল মিনিফাই করার জন্য ব্যবহৃত হচ্ছে, এবং cssmin টাস্কটি CSS ফাইল মিনিফাই করার জন্য ব্যবহৃত হচ্ছে।
• যখন js/*.js ফাইলে কোনো পরিবর্তন হবে, তখন uglify টাস্কটি চালু হবে এবং সেই ফাইলটি মিনিফাই করে dist/js/output.min.js এ সেভ হবে।
• একইভাবে, css/*.css ফাইলে কোনো পরিবর্তন হলে cssmin টাস্কটি চালু হবে এবং ফাইলটি মিনিফাই হয়ে dist/css/output.min.css এ সেভ হবে।

watch টাস্ক চালানো

কোনো পরিবর্তন হলে স্বয়ংক্রিয়ভাবে টাস্ক চালানোর জন্য grunt কমান্ড রান করুন:

grunt

এটি watch টাস্ক চালাবে এবং আপনি যখন ফাইলগুলোতে পরিবর্তন করবেন, তখন uglify বা cssmin টাস্ক স্বয়ংক্রিয়ভাবে চালাবে।

watch টাস্কের অন্যান্য অপশন

• livereload: grunt-contrib-watch প্লাগইনটি livereload এর সাথে একত্রে কাজ করতে পারে। এর মাধ্যমে যখন কোনো ফাইল পরিবর্তন হয়, তখন পেজটি স্বয়ংক্রিয়ভাবে রিলোড হয়ে যাবে।
• atBegin: এটি প্লাগইনকে বলে দেয় যে প্রথমে প্রাথমিকভাবে টাস্কটি চালাতে হবে, তারপর ফাইল পরিবর্তন হলে তা চলবে।

উদাহরণস্বরূপ, যদি আপনি livereload সেটআপ করতে চান, তবে grunt-contrib-watch প্লাগইনের মধ্যে livereload টাস্কটি যোগ করতে পারেন।

Grunt Watch এর উপকারিতা

1. কাজের স্বয়ংক্রিয়তা: আপনি যখন কোডে কোনো পরিবর্তন করবেন, তখন Grunt স্বয়ংক্রিয়ভাবে নির্ধারিত টাস্কগুলো চালাবে, যা ডেভেলপমেন্টের গতি বাড়ায়।
2. ডেভেলপমেন্ট পরিবেশ উন্নয়ন: ফাইল পরিবর্তনের সাথে সাথে স্বয়ংক্রিয়ভাবে টাস্ক চালানোর মাধ্যমে ডেভেলপমেন্ট পরিবেশ আরও গতিশীল এবং কার্যকরী হয়।
3. পারফরম্যান্স উন্নয়ন: পরিবর্তন হওয়ার সাথে সাথে সঠিক টাস্ক চালানোর মাধ্যমে আপনার কোডের গুণগত মান এবং পারফরম্যান্স উন্নত হয়।

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