শুরুকherinদের জন্য Gulp 4 টিউটোরিয়াল (Sass এবং JS ওয়ার্কফ্লো)

Gulp 4-এ এই টিউটোরিয়াল ধাপে ধাপে ব্যাখ্যা করবে, কীভাবে Gulp আপনার ওয়ার্কফ্লোতে সেট আপ করবেন Sass এবং JavaScript ফাইল কম্পাইল করতে।

যদি আপনি এখনও Gulp ব্যবহার করেননি, আমি 적극 সুপারিশ করছি যে আপনি এটি চেক আউট করুন! আপনি Gulp ব্যবহার করে অনেক কার্যকর টাস্ক চালাতে পারেন, যেমন: আপনার Sass ফাইলগুলো CSS-এ কম্পাইল করা, JavaScript ফাইলগুলো প্রসেস করা, এবং আপনার ফাইলগুলো অপ্টিমাইজ করা।

Gulp ইনস্টল এবং চালানোর বেসিক ধাপগুলো যা আমরা এই টিউটোরিয়ালে কভার করব:

1. কমান্ড লাইনে npm install gulp-cli -g চালিয়ে gulp-cli ইনস্টল করুন।
2. npm install gulp চালিয়ে Gulp ইনস্টল করুন।
3. আপনার Gulp ওয়ার্কফ্লোর জন্য অন্যান্য npm প্যাকেজ ইনস্টল করুন।
4. প্রজেক্ট রুটে gulpfile.js ফাইল তৈরি করুন।
5. আপনার npm প্যাকেজগুলো gulpfile-এ মডিউল হিসেবে ইমপোর্ট করুন।
6. আপনার SCSS/JS ফাইল কম্পাইল করতে এবং watch টাস্ক চালাতে gulpfile-এ আপনার টাস্কগুলো যোগ করুন।
7. gulp কমান্ড চালিয়ে আপনার সব টাস্ক রান করুন।

Gulp কি এবং এটি কি করে?

Gulp একটি টুল যা আপনার ওয়েব ডেভেলপমেন্ট ওয়ার্কফ্লোতে বিভিন্ন টাস্ক আপনার জন্য চালাবে। এটিকে একটি বান্ডলার, বিল্ড টুল, বা টাস্ক রানার বলা যেতে পারে। অনুরূপ টুলগুলো হলো Webpack এবং Grunt (যদিও Grunt দ্রুত অপ্রচলিত হচ্ছে)।

এখানে আমরা Gulp-কে কী করব সেটি দেওয়া হলো:

1. আমাদের Sass ফাইলগুলো CSS-এ কম্পাইল করা
2. আমাদের CSS-এ ভেন্ডর প্রিফিক্স যোগ করা
3. আমাদের ফাইনাল CSS ফাইল মিনিফাই করা
4. আমাদের JS ফাইলগুলো কনক্যাটেনেট (অর্থাৎ কম্বাইন) করা
5. আমাদের ফাইনাল JS ফাইল অগ্লিফাই করা
6. ফাইনাল CSS/JS ফাইলগুলো আমাদের /dist ফোল্ডারে সরানো

খুব কুল, ঠিক না?

এটি কীভাবে কাজ করে সেটি হলো: আপনার সব সেটিংস এবং টাস্কগুলো একটি gulpfile.js ফাইলে সংরক্ষিত থাকে। এবং আপনি কমান্ড লাইনে Gulp চালান।

এটির চমৎকার অংশ হলো: একবার আপনার gulpfile সেট আপ হয়ে গেলে, আপনি সহজে অন্য প্রজেক্টের জন্যও এটি পুনরায় ব্যবহার করতে পারেন। তাই এটি একটি বিশাল টাইম-সেভার!

চলুন আপনার কম্পিউটারে Gulp ইনস্টল এবং সেট আপ করার দিকে যাই।

Gulp 4 কীভাবে ইনস্টল করবেন

Gulp চালানোর আগে, আপনাকে কয়েকটি জিনিস ইনস্টল করতে হবে:

• যদি না থাকে তবে Node.js ইনস্টল করুন।
• Gulp Command Line Utility ইনস্টল করুন npm install --global gulp-cli চালিয়ে।

Gulp কাজ করার পর, আমার বিল্ট একটি ডেমো প্রজেক্ট চেক আউট করুন যেটি Gulp ব্যবহার করে!

এটি একটি ফ্রন্ট-এন্ড বয়লারপ্লেট প্রজেক্ট যা যেকোনো সাধারণ ফ্রন্ট-এন্ড ওয়েবসাইট দ্রুত শুরু করার জন্য তৈরি।

(বাকি টিউটোরিয়ালে প্লেন্টি কোড স্নিপেট আছে, তাই আপনি সেগুলোও রেফারেন্স হিসেবে ব্যবহার করতে পারেন!)

ফ্রন্ট-এন্ড বয়লারপ্লেট প্রজেক্ট সেট আপ করতে:

• প্রজেক্টের Git repo ক্লোন বা ডাউনলোড করুন আপনার কম্পিউটারে।
• প্রজেক্ট খুলুন, এবং রুট প্রজেক্ট ফোল্ডারে কমান্ড লাইনে npm install চালান। এটি package.json ফাইলে লিস্ট করা npm প্যাকেজগুলো ইনস্টল করবে, বিশেষ করে Gulp 4।

আপনার এখন প্রজেক্ট ফাইলগুলো সেট আপ হয়ে থাকা উচিত, এবং Gulp টাস্ক চালাতে ব্যবহৃত সব npm প্যাকেজ ইনস্টল হয়ে থাকা উচিত।

রেপো থেকে ফাইলগুলো রেডি থাকা কারণে, কমান্ড লাইনে gulp টাইপ করলে আপনাকে নিচের আউটপুট দেখতে মেলবে:

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'cacheBustTask'... [22:29:48] Finished 'cacheBustTask' after 39 ms [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'... 

এবং আপনি Gulp চালিয়েছেন!

Gulp চালালে প্রজেক্টে কী ঘটে?

ঠিক আছে, আপনার প্রজেক্ট সফলভাবে কাজ করছে! এখন প্রজেক্টে কী আছে এবং কীভাবে কাজ করে সেটি বিস্তারিত জানি।

প্রথমে, আমাদের প্রজেক্টের ফাইল স্ট্রাকচারের একটি দ্রুত রানডাউন:

• index.html — আপনার মূল HTML ফাইল
• package.json — npm install চালালে ইনস্টল করার জন্য সব npm প্যাকেজ থাকে
• gulpfile.js — কনফিগারেশন এবং সব Gulp টাস্ক রান করে
• /app — ওয়ার্কিং ফোল্ডার, আপনি এখানে SCSS/JS ফাইল এডিট করবেন
• /dist — Gulp এখানে আউটপুট ফাইল দেবে, এই ফাইলগুলো এডিট করবেন না

আপনার ওয়ার্কফ্লোতে, আপনি HTML, SCSS, এবং JS ফাইল এডিট করবেন। Gulp তারপর যেকোনো পরিবর্তন ডিটেক্ট করবে এবং সব কম্পাইল করবে। তারপর আপনি আপনার ফাইনাল CSS/JS ফাইলগুলো /dist ফোল্ডার থেকে আপনার index.html ফাইলে লোড করবেন।

এখন Gulp চলছে, চলুন আরও গভীরে দেখি Gulp কীভাবে কাজ করে।

gulpfile.js-এ সঠিক কী আছে?

gulpfile-এর প্রতিটি সেকশন এবং সেগুলো কী করে তার একটি গভীর ব্যাখ্যা নিচে দেওয়া হলো:

স্টেপ ১: npm মডিউল инициализация করুন

gulpfile.js-এর খুব টপে, আমাদের ইনস্টল করা npm প্যাকেজগুলো require() ফাংশন ব্যবহার করে ইমপোর্ট করার অনেক কনস্ট্যান্ট আছে।

আমাদের প্যাকেজগুলোর কাজ:

Gulp প্যাকেজ:

• gulp — gulpfile.js-এ সব কিছু চালায়। আমরা শুধু নির্দিষ্ট gulp ফাংশনগুলো এক্সপোর্ট করছি যেগুলো আমরা ব্যবহার করব, যেমন src, dest, watch, এবং অন্যান্য। এটি আমাদের تلك ফাংশনগুলোকে সরাসরি কল করতে দেয় gulp ছাড়া, উদাহরণস্বরূপ আমরা শুধু src() টাইপ করতে পারি gulp.src() বদলে।

CSS প্যাকেজ:

• gulp-sourcemaps — ব্রাউজার ডেভ টুলসে CSS স্টাইলগুলাকে আসল SCSS ফাইলে ম্যাপ করে
• gulp-sass — SCSS কে CSS-এ কম্পাইল করে
• gulp-postcss — autoprefixer এবং cssnano চালায় (নিচে দেখুন)
• autoprefixer — CSS-এ ভেন্ডর প্রিফিক্স যোগ করে
• cssnano — CSS মিনিফাই করে

JS প্যাকেজ:

• gulp-concat — একাধিক JS ফাইল এক ফাইলে কম্বাইন করে
• gulp-uglify — JS মিনিফাই করে

আমরা একটি স্ট্রিং রিপ্লেসও ব্যবহার করছি index.html-এ CSS এবং JS ফাইল রেফারেন্সে ক্যাশ বাস্টিং করার জন্য। এটি নিশ্চিত করে যে আপনি ফাইল পরিবর্তন করলে ওয়েবসাইট সেগুলোর সবচেয়ে নতুন কপি লোড করবে।

স্ট্রিং রিপ্লেস প্যাকেজ:

• gulp-replace — CSS/JS রেফারেন্সে ক্যাশ বাস্টের জন্য একটি স্ট্রিং প্যারামিটার যোগ করে

এখন আমাদের মডিউলগুলো যোগ হয়ে গেছে, চলুন সেগুলো কাজে লাগাই!

স্টেপ ২: মডিউলগুলো ব্যবহার করে আপনার Gulp টাস্ক চালান

Gulp-এ একটি "টাস্ক" মূলত একটি ফাংশন যা একটি নির্দিষ্ট উদ্দেশ্য সম্পাদন করে।

আমরা কয়েকটি ইউটিলিটি টাস্ক তৈরি করছি আমাদের SCSS এবং JS ফাইল কম্পাইল করতে, এবং সেগুলো পরিবর্তন জন্য watch করতে। তারপর সেই ইউটিলিটি টাস্কগুলো আমাদের ডিফল্ট Gulp টাস্কে রান হবে যখন কমান্ড লাইনে gulp টাইপ করব।

ফাইল পাথের জন্য কনস্ট্যান্ট তৈরি করা

আমাদের টাস্ক লিখার আগে, আমাদের কাছে কয়েকটি লাইন কোড আছে যা আমাদের ফাইল পাথগুলো কনস্ট্যান্ট হিসেবে সংরক্ষণ করে। এটি অপশনাল, কিন্তু আমি পাথ ভেরিয়েবল ব্যবহার করা পছন্দ করি যাতে আমাদের প্রতিবার ম্যানুয়ালি সেগুলো রি-টাইপ করতে না হয়:

এই কোড scssPath এবং jsPath কনস্ট্যান্ট তৈরি করে যা আমরা Gulp-কে ফাইলগুলো কোথায় আছে তা বলতে ব্যবহার করব।

Sass টাস্ক

আমাদের Sass টাস্কের কোড:

function scssTask(){ return src(files.scssPath) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(postcss([ autoprefixer(), cssnano() ])) .pipe(sourcemaps.write('.')) .pipe(dest('dist') ); } 

আমাদের Sass টাস্ক, যাকে scssTask() বলা হয়েছে, একাধিক কাজ করছে। Gulp-এ, আপনি প্রথম ফাংশনের পর Gulp ফাংশন pipe() ব্যবহার করে একাধিক ফাংশন চেইন করতে পারেন।

আমাদের টাস্কে, Gulp প্রথমে src() চালাচ্ছে SCSS ফাইলগুলোর সোর্স ডিরেক্টরি লোড করতে। এটি আমরা আগে তৈরি করা কনস্ট্যান্ট ব্যবহার করছে, files.scssPath।

তারপর src()-এর পর আমরা সব কিছু পাইপ করছি বিল্ড প্রসেসে। আপনি এটিকে ভাবতে পারেন একটি বিদ্যমান পাইপের সাথে আরও বেশি পাইপ সেকশন যোগ করার মতো।

যে ফাংশনগুলো এটি চালাচ্ছে:

• sourcemaps.init() — src()-এর পর সোর্সম্যাপ্স প্রথমে যোগ করতে হয়
• sass() সকল SCSS ফাইল কম্পাইল করে একটি CSS ফাইলে
• postcss() দুটি অন্য প্লাগইন চালায়:
  • autoprefixer() CSS-এ ভেন্ডর প্রিফিক্স যোগ করতে
  • cssnano() CSS ফাইল মিনিফাই করতে
• sourcemaps.write() একই ডিরেক্টরিতে সোর্সম্যাপস ফাইল তৈরি করে
• dest() Gulp-কে বলে ফাইনাল CSS ফাইল এবং CSS সোর্সম্যাপস ফাইল /dist ফোল্ডারে রাখতে

JS টাস্ক

JS ফাইল কম্পাইল করার টাস্কের কোড:

function jsTask(){ return src([files.jsPath]) .pipe(concat('all.js')) .pipe(uglify()) .pipe(dest('dist') ); } 

আমাদের JavaScript টাস্ক, যাকে jsTask() বলা হয়েছে, একাধিক ফাংশন চালাচ্ছে:

• src() files.jsPath থেকে JS ফাইলগুলো লোড করতে
• concat() সব JS ফাইল এক JS ফাইলে কম্বাইন করতে
• uglify() JS ফাইল অগ্লিফাই/মিনিফাই করতে
• dest() ফাইনাল JS ফাইল /dist ফোল্ডারে সরাতে

ক্যাশ বাস্ট টাস্ক

ক্যাশ বাস্ট টাস্কের কোড:

var cbString = new Date().getTime(); function cacheBustTask(){ return src(['index.html']) .pipe(replace(/cb=\d+/, 'cb=' + cbString)) .pipe(dest('.')); } 

index.html ফাইলে, আমি CSS এবং JS ফাইলগুলোর জন্য নিচের রেফারেন্স ব্যবহার করছি:

<link rel="stylesheet" href="dist/style.css?cb=123"> <script src="dist/all.js?cb=123"></script> 

ক্যাশ বাস্ট সাহায্য করার কারণ হলো আপনার ব্রাউজার এবং ওয়েব হোস্ট সার্ভার প্রায়শই অ্যাসেট ফাইল যেমন CSS এবং JS ফাইলগুলোর একটি কপি ক্যাশ, বা সংরক্ষণ করে রাখে। তাই আপনি একই পেজ আবার লোড করলে, ব্রাউজারকে সার্ভার থেকে পুনরায় ডাউনলোড করার বদলে লোকালি ক্যাশ করা কপিগুলো লোড করতে দ্রুত হয়।

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

বাধ্য করার একটি উপায় হলো সেই ফাইল রেফারেন্সের শেষে একটি ছোট কুয়েরিস্ট্রিং ?cb=123 যোগ করা। যদি ব্রাউজার পেজ রিলোড করে এবং কুয়েরিস্ট্রিং গতবার থেকে আলাদা হয়, তবে এটি ফাইলটি রিফ্রেশ করবে।

আমি Gulp replace() ফাংশন ব্যবহার করছি "cb=" এবং যেকোনো নাম্বার ধারণকারী স্ট্রিং খুঁজে বের করতে। এবং সেই নাম্বারকে বর্তমান সময়কে মিলিসেকেন্ডে কনভার্ট করে তৈরি একটি নতুন নাম্বার দিয়ে রিপ্লেস করছি।

এভাবে প্রতিবার Gulp চলে, কুয়েরিস্ট্রিং আলাদা হবে এবং আপনি নিশ্চিত হবেন যে নতুন CSS এবং JS ফাইলগুলো ইউজারের ব্রাউজারে লোড হচ্ছে।

Gulp watch টাস্ক

Gulp watch() ফাংশন একটি সুপার উপকারী ফিচার। আপনি এটি চালালে, এটি liên tục চলবে, আপনার ফাইলগুলো দেখে যেকোনো পরিবর্তন ডিটেক্ট করতে। যখন এটি পরিবর্তন ডিটেক্ট করে, এটি আপনার বলা যেকোনো সংখ্যক টাস্ক চালাবে।

এটি চমৎকার কারণ তখন আপনাকে প্রতিটি কোড পরিবর্তনের পর ম্যানুয়ালি gulp চালাতে হবে না।

আমাদের Gulp watch টাস্ক উদাহরণ কোড:

function watchTask(){ watch( [files.scssPath, files.jsPath], parallel(scssTask, jsTask) ); } 

watch() ফাংশন তিনটি প্যারামিটার নেয়, কিন্তু আমরা দুটি ব্যবহার করছি:

• globs, অর্থাৎ ফাইল পাথ স্ট্রিং,
• options (ব্যবহৃত নেই), এবং
• tasks, অর্থাৎ কোন টাস্কগুলো চালাতে চাই।

আমরা আমাদের watch টাস্ককে আমাদের scssPath এবং jsPath ডিরেক্টরিতে ফাইলগুলো দেখতে বলছি। তারপর যেকোনো পরিবর্তন হলে, scssTask এবং jsTask টাস্কগুলো সিমাল্টেনিয়াসলি চালাতে বলছি।

এখন আমাদের ইউটিলিটি টাস্কগুলো সেট আপ হয়ে গেছে, আমাদের মেইন Gulp টাস্ক সেট আপ করতে হবে।

ডিফল্ট Gulp টাস্ক

এটি মূল Gulp টাস্ক, যা অটোমেটিক্যালি চলবে যদি আপনি কমান্ড লাইনে gulp টাইপ করেন।

exports.default = series( parallel(scssTask, jsTask), watchTask); 

আপনি gulp কমান্ড ব্যবহার করলে Gulp অটোমেটিক্যালি আপনার gulpfile.js-এ default টাস্ক খোঁজে। তাই আপনাকে ডিফল্ট টাস্ক এক্সপোর্ট করতে হবে যাতে এটি কাজ করে।

আমাদের ডিফল্ট টাস্ক নিচের কাজগুলো করবে:

• scssTask এবং jsTask সিমাল্টেনিয়াসলি চালাবে parallel() ব্যবহার করে
• তারপর watchTask চালাবে

আপনি লক্ষ্য করবেন যে আমরা সব টাস্কগুলো series() ফাংশনের ভিতরে রাখছি।

এটি Gulp 4-এ টাস্ক হ্যান্ডল করার জন্য একটি বড় নতুন পরিবর্তন— আপনাকে সব টাস্ক (একটি হলেও) হয় series() হয় parallel()-এ র‍্যাপ করতে বাধ্য।

Gulp 4-এ কী পরিবর্তন হয়েছে

আপনি যদি সব কিছু রান করার জন্য tasks() ফাংশন ব্যবহার করতেন, তবে আপনি লক্ষ্য করতে পারেন এখন পার্থক্য আছে।

gulp.task() ব্যবহার করে সব টাস্ক ফাংশন ধারণ করার বদলে, আমরা আসল ফাংশন তৈরি করছি যেমন scssTask() এবং watchTask()।

এটি Gulp-এর অফিসিয়াল গাইডলাইন মেনে টাস্ক তৈরি করার জন্য।

Gulp টিম tasks()-এর চেয়ে exports ব্যবহার করার সুপারিশ করে:

তবে, তারা এখনও আপনাকে task() ফাংশন ব্যবহার করতে দেয়, এটি আরও করেন্ট সিনট্যাক্স ব্যবহার করা উচিত, কারণ সম্ভবত Gulp ভবিষ্যতে task() ডিপ্রিকেট করবে।

Gulp 3 থেকে মাইগ্রেট করার সমস্যা?

আপনি যদি Gulp 3 ব্যবহার করতেন এবং শুধু চান যে Gulp 4-এ কাজ করে, আপনি লাকি!

মূল ব্রেকিং পরিবর্তন হলো কীভাবে টাস্ক চালানো হয়।

Gulp 4 টাস্ক চালাতে দুটি নতুন ফাংশন পরিচয় করিয়েছে: series() এবং parallel()। এটি আপনাকে একাধিক টাস্ক কনকারেন্টলি বা একের পর এক চালাতে দেয়।

পূর্বে, Gulp 3-এ, আপনি সহজে একটি সিঙ্গল ফাংশন বা একাধিক ফাংশন একটি অ্যারেতে লিস্ট করতে পারতেন। যানবে, Gulp 4-এ, সেগুলো series() বা parallel()-এ র‍্যাপ ছাড়া করলে এরর থ্রো করবে।

কিছু এরর:

AssertionError [ERR_ASSERTION]: Task function must be specified 

এটি কীভাবে দ্রুত ফিক্স করবেন:

পুরানো Gulp 3 সিনট্যাক্সে টাস্ক

Gulp 3-এ, আপনি টাস্ক এইভাবে চালাতে পারতেন:

gulp.task('default', ['sass', 'js', 'watch']); gulp.watch('app/scss/*.scss', ['sass']); 

Gulp 4 সিনট্যাক্সে টাস্ক

সেই টাস্কগুলো series() ফাংশনে রাখুন এইভাবে:

gulp.task('default', gulp.series('sass', 'js', 'watch')); gulp.watch('app/scss/*.scss', gulp.series('sass')); 

এটি সর্বনিম্ন পরিবর্তন দিয়ে টাস্ক ফাংশন এরর ফিক্স করবে! 🙂

প্রজেক্ট ফাইল ডাউনলোড

এখানে দেখানো সকল কোড একটি GitHub রেপোসিটরি থেকে যা আমার ফ্রন্ট-এন্ড বয়লারপ্লেটের জন্য। এটি যেকোনো সাধারণ ফ্রন্ট-এন্ড ওয়েবসাইট প্রজেক্টের জন্য একটি কুইক স্টার্টার কিট।

আপনাকে স্বাগতম, এটি চেক আউট করুন, কাস্টোমাইজ করুন, এবং আপনার নিজের প্রজেক্টের জন্য ব্যবহার করুন!

GitHub রেপোসিটরি এখানে চেক আউট করুন।