Gulp নিয়ে যত কথা পর্ব #১

আমরা সবাই প্রতি নিয়ত নতুন অনেক কিছু শিখছি নিজের স্কিল ডেভেলপমেন্টের জন্য। কিন্তু মজার ব্যাপার হচ্ছে যে নতুন কিছু শিখার সময় আমরা অনেকেই জানি না এটি দিয়ে কোন সমস্যার সমাধান করা হয়। আমার মতে নতুন কোন কিছু শিখার ক্ষেত্রে আমরা যদি না জানি এটি দিয়ে কোন সমস্যার সমাধান করা হয় তাহলে কোন প্রশ্নই আসে না যে আমাদের অতি মূল্যবান সময়টুকু ব্যয় করার। তাহলে চুলুন আজকে Gulp-এর চৌদ্দগুষ্টি উদ্ধার করে ফেলি 😀 😀 😀

Gulp-আসলে কি ?? এটি খায় নাকি মাথায় দেয় ?? নাকি পিন্দে ??? চলেন সব প্রশ্নের উত্তর খুঁজে বের করি।

উত্তরঃ- Gulp-হচ্ছে একটি টাস্ক রানার বা প্রোজেক্ট ম্যানেজার ডিপেন্ডেন্সি। অর্থাৎ, এটি একটি স্বয়ংক্রিয় টাস্ক বিল্ড সিস্টেম যেমন- সিসিএস এবং এইচটিএমএল মিনিফিকেশন, কনক্যাটেনেশন লাইব্রেরী ফাইলস, কম্পাইলিং LESS/SASS ফাইলস, ইমেজ ফাইল মিনিফিকেশন ইত্যাদি।

কেন Gulp ব্যবহার করব ???

উত্তরঃ-

১। এটি অন্যান্য task রানার থেকে অনেক সহজ, হালকা এবং দ্রুততর।
২। সিএসএস হিসাবে LESS/SASS ব্যবহার করে এবং এটিকে CSS-এ কনভার্ট করে।
৩। CSS-এর জন্য অটো ভেন্ডর প্রিফিক্স অ্যাড করে।
৪। সব লাইব্রেরী ফাইলকে একটি বেইস ফাইলে কনভার্ট করে।
৫। কোন সোর্স ফাইল এডিট করার পর স্বয়ংক্রিয়ভাবে ব্রাউজার রিফ্রেশ করে ।
৬। অপ্টিমাইজ assets ফোল্ডার যেমন- সিএসএস, যেএস, আইএমজি ইত্যাদি।
Gulp-ব্যবহার করার জন্য আরও কিছু লাগবে?? :/ :/ ঠিক আছে তাহলে আমরা এতক্ষণে যেনে গেলাম যে Gulp কি, কেন ব্যবহার করব ইত্যাদি ইত্যাদি সব। তাহলে Gulp ব্যবহার করব কি করে ??? খুব ভাল প্রশ্ন 🙂 🙂 চলেন জানা যাক Gulp ব্যবহার করলে কি কি লাগে।
Gulp যেহেতু Node.js এর সাথে কাজ করে তাই আমাদের পিসিতে এটি ইন্সটল করতে হবে। এই লিঙ্ক থেকে ডাউনলোড করে নিতে পারেন https://nodejs.org/en/download/ । ডাউলোড করে ইন্সটল করার সময় npm package manager এটি সিলেক্ট করে দেন। তারপর বাকি কাজ আপনারা নিজেরাই পারবেন আশা করি ইনশাআল্লাহ্‌। ইন্সটল করার পর command prompt – টি ওপেন করেন।
তারপর node -v দিয়ে এন্টার দিন। এটির কাজ হচ্ছে node এর ভার্সন চেক করা। আবার npm -v এটি লেখে এন্টার দিন। এটি npm এর ভার্সন চেক করে। একটু কষ্ট করে এখন এই কমান্ডটা টাইপ করুন npm install gulp-cli -g। এটি আপনার পিসিতে Gulp- গ্লোবালী ইন্সটল করবে।
এখন আমরা Gulp নিয়ে কাজ করার জন্য রেডি । এখন আপনাদের পিসিতে যেকোনো নামে একটি ফোল্ডার তৈরি করেন। তবে নাম দেওয়ার সময় যদি একাধিক শব্দের নাম হয় তাহলে অবশই শব্দের মাঝে কোন স্পেস না দিয়ে – এই চিহ্নটি ব্যহবার করুন। ফোল্ডারটির উপর শিফট চেপে মাউজের রাইট বাটনে ক্লিক করুন। open command window here লেখাটির উপর ক্লিক করুন। command window টি ওপেন হবে। তারপর ধাপে ধাপে কাজগুলো করে ফেলেন –
npm init দিয়ে এন্টার দিন। এন্টার দেওয়ার কিছুক্ষণ পর দেখতে পারবেন নিচের মত কিছু লেখা দেখাবে। এইখান থেকে নিজেরদের প্রয়োজনীয় তত্ত্বগুলো পূরণ করে ফেলুনঃ-
name: <your package name>
version: <your package version >
description: <your package description>
Entry Point: <your entry js file>
test Command: <your package test command>
Git Repository: <your git repo >
Keywords: <basic keywords for your package>
Author: <package author name>
License: <your package license>
সব কিছু ঠিকঠাক মত করার পর package.json নামে একটি ফাইল দেখতে পারবেন আপনার ফোল্ডারের ভিতরে। এইটির মধ্যে আপনার সব তথ্য থাকবে। এখন আমাদের প্রোজেক্টিকে Gulp দিয়ে করতে হলে আমাদের প্রোজেক্টের ভিতরে আবার Gulp লোকালি ইন্সটল করতে হবে।। তার জন্য npm install gulp -D লিখে এন্টার দিন। কিছুক্ষণ পর দেখতে পারবেন আপনার প্রোজেক্ট ফোল্ডারের ভিতরে node modules নামে একটা ফোল্ডার তৈরি হয়ে গেছে।। এখন আর কোন কথা না বলে gulpfile.js নামে একটা ফাইল তৈরি করে ফেলেন আপনার প্রোজেক্ট ফোল্ডারের ভিতরে এবং এই ফাইলটিকে ইডিটরে ওপেন করেন। এখন অনেকের মনে প্রশ্ন আসতে পারে এটি দিয়ে কি হবে। gulpfile হচ্ছে এমন একটি ফাইলে যেখানে আমাদের সব টাস্ক ডিফাইন করা থাকবে। যখন আমরা কোন টাস্ককে রান করাব তখন এইখান থেকেই রান হবে।
এখন আমাদেরকে gulpfile এর ভিতরে gulp কে ডাকতে হবে এবং তাকে ডাকার জন্য এই কোডটি লিখে ফেলেন var gulp = require(“gulp”);
এখন আমরা দেখব কিভাবে টাস্ক লিখতে হয় 😀 😀
gulp.task(“ এইখানে টাস্কের নামে হবে ”, function() { এইখানে টাস্ক কি কাজ করবে তা লিখতে হবে });
gulp.task(“hello”, function() {
    console.log(“We Are Learner!!”);
});
এখন আপনার command prompt-এ gulp hello লিখে এন্টার দেওয়ার পরে দেখতে পারবেন We Are Learner নামে লেখাটি। যদি এই লিখাটি দেখতে পারেন তাহলে আপনাকে অভিনন্দন এই কারণে যে আপনি Gulp শিখার জন্য তৈরি হয়ে গেছেন। তাহলে আজ এই পর্যন্ত থাক সবাই ভাল থাকবেন। আগামী পর্বে আবারও আড্ডা অবে ইনশাআল্লাহ্‌।।

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।