ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে লারাভেল এর টাস্ক টুল এলিক্সিয়ার ( Elixir ) এর ব্যবহার

Gulp WordPress


লারাভেল এলিক্সিয়ার ( Elixir )
হল পি, এইচ, পি ফ্রেমওয়ার্ক লারাভেল এর টাস্ক অটোমেশন টুল, যা গাল্প ( gulp ) নির্ভর খুব মজার নোডজেএস এপ্লিকেশন যা দিয়ে আপনি আপনার প্রোজেক্টে ম্যানুয়েলি করা লাগে এমন কাজ গুলি টাস্ক লিখে করিয়ে নিতে পারবেন,

সাধারণত এইটুল টা লারাভেল ডেভেলপারগন তাঁদের প্রোজেক্টে বিভিন্ন অটোমেটেড টাস্ক যেমন less থেকে css এ কম্পাইল, css, js মিনিফিকেশন, ইমেজ অপটিমাইজেশন, বিভিন্ন ব্রাউজারে সাইট চেক সহ আরও অনেক ম্যানুয়েল কাজ অটোমেটিক ভাবে করার জন্যে ব্যবহার করে থাকেন, কিন্তু আমরা চাইলে ওয়ার্ডপ্রেস ডেভেলপমেন্ট এ বিশেষ করে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্টে ও এই টুলটা কাজে লাগাতে পারি, তো চলুন দেরী না করে শুরু করে দিইঃ

যেভাবে ইন্সটল করবেনঃ

  • প্রথমে নোডজেএস ইন্সটল করুন
  • এর পর NPM ( নোড প্যাকেজ ম্যানেজার ) ইন্সটল করুন 
  • এর পর গাল্প ( gulp ) টা গ্লোবালি ইন্সটল করে নিন, কারণ এলিক্সিয়ার গাল্প ডিপেনডেন্ট  sudo npm install --global gulp
  • এর পর ডিরেক্টরি চেঞ্জ করে আপনি যে থিম  ওয়ার্ডপ্রেস থিম  ডিরেক্টরিতে যান cd ~/Sites/YOUR WORDPRESS DIRECTORY/wp-content/themes/YOUR THEME
  • এখানে আপনাকে এই প্রজেক্টের জন্যে ব্যবহার করা নোডজেএস এর প্যাকেজ গুলির ডিপেন্ডেন্সি লিস্ট রাখার জন্যে package.json নামে একটা ফাইল তৈরি করে নিতে হবে, আপনি চাইলে ওটা ম্যানুয়েলি তৈরি করে নিতে পারেন অথবা npm init কমান্ডটা দিয়েও তৈরি করে নিতে পারেন।
  • গাল্প তো আমরা গ্লোবালি ইন্সটল করেছি কিন্তু এই প্রোজেক্টে লাগবে কিনা তা কিন্তু কোথাও বলিনি 🙂 আপনার এই প্রোজেক্টে যে গাল্পের ডিপেন্ডেন্সি আছে তা ওই package.json ফাইলে উল্লেখ থাকতে হবে, এজন্যে আপনি npm install --save-dev gulp কমান্ডটা দিয়ে কাজ টা করে নিতে পারেন।
  • গাল্প তো এড করা হয়ে গেল, এলিক্সিয়ার টাও এড করে নিন  sudo npm install laravel-elixir --save-dev দিয়ে।
  • ইন্সটলেশন মুটামুটি শেষ এবার আসুন –

টাস্ক গুলি যেভাবে লিখবেনঃ

  • এবার আমাদের প্রোজেক্টের জন্যে দরকারি টাস্ক গুলি লিখার জন্যে আমরা gulpfile.js নামে একটা ফাইল তৈরি করব যেখানে এই কোড গুলি এড করে নিতে হবে
  • ধরুন আমরা আমাদের থিমে less ব্যবহার করব তাহলে less ফাইল গুলি less/ নামের ডিরেক্টরি থাকবে আর কম্পাইলড css গুলি css/ নামের ডিরেক্টরি তে থাকবে, যেখানে আমরা কোড করব less ফাইলে কিন্তু তা অটোমেটিক কম্পাইল হয়ে css ডিরেক্টরিতে জমা হবে।
  • এবার আপনাকে elixir এর কিছু কনফিগারেশন চেঞ্জ করতে হবে কারণ এটা লারাভেল এর ডিরেক্টরি স্ট্রাকচারে কনফিগ করা কিন্তু আমাদের less ফাইল আর css পাথ তো ওই রকম না, এজন্যে আমরা

    এই দুটোই খালি রেখেছি কারণ ডিফল্ট এসেট পাথ resources/assets আর less পাথ less ডিরেক্টরি তার মানে ফুল less পাথ হল resources/assets/less কিন্তু আমরা less ডিরেক্টরি নাম চেঞ্জ করে শুধু asset পাথ খালি রেখেছি যার কারণে আমাদের less ডিরেক্টরি less/ ই ডিফল্ট থাকবে,
  • publicPath এর ক্ষেত্রে ও একই কথা,
  • আপনি এই ডিফল্ট কনফিগারেশন গুলি gulpfile.js ফাইল আছে ওখানে node_modules ডিরেক্টরি তে গিয়ে laravel-elixir/Config.js ফাইলে পাবেন।
  • এবার less থেকে css এ কম্পাইল করার টাস্ক লিখি এভাবে, ধরে নিলাম আপনার less ফাইলের নাম app.less
  • পুরা কোড দেখতে হবেঃ
  • এবার টার্মিনাল খুলে শুধু gulp কমান্ড দিয়ে এন্টার চাপুন, দেখবেন আপনার less/app.less  ফাইলটা সোর্সম্যাপ সহ css/app.css ফাইল নামে জেনারেট হয়ে গেছে, functions.php ফাইলে app.css টা enqueue করে নিন 🙂
  • আপনি যদি চান যে less ফাইল এক রকম আর css আউটপুট এক রকম হবে তাহলে আপনাকে

    এর জায়গায়

    ব্যবহার করতে পারেন,
  • elixir মেথড চেইনিং সাপোর্ট কে মানে আপনি কয়েকটা টাস্ক চাইলে এভাবেও লিখতে পারেনঃ
  • এলিক্সিয়ার এর ডকুমেন্টেশনটা দেখলেই আপনি সহজে বুঝে যাবেন, যে কিভাবে টাস্ক গুলি লিখতে হয়, আর কি কি ফিচার আছে 🙂

আজ এই পর্যন্তই…