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

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

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

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

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

গুলপ কি এবং এটি কি করে?

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

গুলপ আমাদের জন্য যা করতে যাচ্ছি তা এখানে:

1. আমাদের Sass ফাইলগুলি CSS-এ কম্পাইল করুন
2. আমাদের CSS-এ বিক্রেতা উপসর্গ যোগ করুন
3. আমাদের চূড়ান্ত CSS ফাইলটি ছোট করুন
4. আমাদের JS ফাইলগুলিকে একত্রিত করুন (যেমন একত্রিত করুন)
5. আমাদের চূড়ান্ত JS ফাইলটিকে কুৎসিত করুন
6. চূড়ান্ত CSS/JS ফাইলগুলিকে আমাদের /dist-এ সরান ফোল্ডার।

বেশ সুন্দর, তাই না?!

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

এটি সম্পর্কে দুর্দান্ত অংশটি হ'ল একবার আপনার গাল্পফাইলটি সমস্ত সেট আপ হয়ে গেলে, আপনি সহজেই অন্যান্য প্রকল্পের জন্য এটি পুনরায় ব্যবহার করতে পারেন। তাই এটি একটি বিশাল সময়-সংরক্ষক!

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

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

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

• Node.js ইনস্টল করুন যদি আপনার এটি এখনও না থাকে।
• npm install --global gulp-cli চালিয়ে Gulp কমান্ড লাইন ইউটিলিটি ইনস্টল করুন .

একবার আপনি Gulp কাজ করার পরে, আমার তৈরি একটি ডেমো প্রকল্প দেখুন যা Gulp ব্যবহার করে!

এটি একটি ফ্রন্ট-এন্ড বয়লারপ্লেট প্রজেক্ট যা আমার জন্য যেকোনো সহজ ফ্রন্ট-এন্ড ওয়েবসাইট দিয়ে শুরু করার একটি দ্রুত উপায়।

(এই টিউটোরিয়ালের বাকি অংশে আমার কাছে প্রচুর কোড স্নিপেট রয়েছে, তাই আপনি সেগুলিও উল্লেখ করতে পারেন!)

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

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

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

যেহেতু রেপো থেকে ফাইলগুলি যাওয়ার জন্য প্রস্তুত, যদি আপনি 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 চালান!

আপনি যখন গুলপ চালান তখন প্রকল্পে কী ঘটছে?

ঠিক আছে, আপনি সফলভাবে কাজ করছেন প্রকল্প! এখন আসুন এই প্রকল্পে কী আছে এবং এটি কীভাবে কাজ করে সে সম্পর্কে আরও বিশদে জেনে নেওয়া যাক।

প্রথমত, এখানে আমাদের প্রকল্পের ফাইল কাঠামোর একটি দ্রুত রানডাউন রয়েছে:

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

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

এখন যেহেতু আমরা গুলপ চালাচ্ছি, আসুন গুলপ কীভাবে কাজ করে তা আরও ঘনিষ্ঠভাবে দেখে নেওয়া যাক।

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

এখানে gulpfile এর প্রতিটি বিভাগের একটি গভীর ব্যাখ্যা এবং তারা কি করে:

ধাপ 1:npm মডিউল শুরু করুন

gulpfile.js-এর একেবারে উপরে , আমাদের কাছে ধ্রুবকগুলির একটি সম্পূর্ণ গুচ্ছ রয়েছে যা require() ব্যবহার করে আমরা পূর্বে ইনস্টল করা npm প্যাকেজগুলি আমদানি করেছিলাম ফাংশন।

আমাদের প্যাকেজগুলি যা করে তা এখানে:

গুলপ প্যাকেজ:

• 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 ছোট করে

জেএস প্যাকেজ:

• gulp-concat — একাধিক JS ফাইলকে একটি ফাইলে সংযুক্ত করে
• gulp-uglify — JS কে ছোট করে

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

স্ট্রিং প্রতিস্থাপন প্যাকেজ:

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

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

ধাপ 2:আপনার গুলপ কাজগুলি চালানোর জন্য মডিউল ব্যবহার করুন

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

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

ফাইল পাথের জন্য ধ্রুবক তৈরি করা হচ্ছে

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

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

সাস টাস্ক

এখানে আমাদের 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() একটি CSS ফাইলে সমস্ত SCSS ফাইলের সংকলন করে
• postcss() অন্য দুটি প্লাগইন চালায়:
  • autoprefixer() CSS এ বিক্রেতা উপসর্গ যোগ করতে
  • cssnano() CSS ফাইলকে ছোট করতে
• sourcemaps.write() একই ডিরেক্টরিতে সোর্সম্যাপ ফাইল তৈরি করে।
• dest() গুল্পকে চূড়ান্ত CSS ফাইল এবং CSS সোর্সম্যাপ ফাইলকে /dist-এ রাখতে বলে ফোল্ডার।

JS টাস্ক

JS ফাইল কম্পাইল করার জন্য আমাদের টাস্কের কোড এখানে:

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

আমাদের জাভাস্ক্রিপ্ট টাস্ক, যাকে বলা হয় 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=" এবং যেকোনো সংখ্যা সম্বলিত স্ট্রিং খোঁজার জন্য। এবং সেই সংখ্যাটিকে 1970 সাল থেকে মিলিসেকেন্ডে রূপান্তরিত বর্তমান সময়ের তৈরি একটি নতুন সংখ্যা দিয়ে প্রতিস্থাপন করুন৷

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

গল্প wটাস্ক টাস্ক

The Gulp watch() ফাংশন একটি সুপার দরকারী বৈশিষ্ট্য. আপনি যখন এটি চালান, এটি ক্রমাগত চলবে, কোনো পরিবর্তন সনাক্ত করতে আপনার ফাইলগুলি দেখবে। যখন এটি পরিবর্তন শনাক্ত করে, তখন এটি আপনার বলা যেকোনো সংখ্যক কাজ চালাবে৷

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

এখানে আমাদের Gulp ঘড়ি টাস্ক উদাহরণ কোড:

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

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

• গ্লোবস, মানে ফাইল পাথ স্ট্রিং,
• বিকল্প (ব্যবহৃত নয়), এবং
• টাস্ক, মানে কোন কাজগুলো আমরা চালাতে চাই।

আমাদের ঘড়ির কাজটি হল আমাদের scssPath-এ ফাইলগুলি দেখা এবং jsPath ডিরেক্টরি তারপর যদি উভয়ের মধ্যে কোনো পরিবর্তন করা হয়, scssTask চালান এবং jsTask একই সাথে কাজ।

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

ডিফল্ট গুলপ টাস্ক

এটি হল প্রধান Gulp টাস্ক, যা আপনি gulp টাইপ করলে স্বয়ংক্রিয়ভাবে চলবে কমান্ড লাইনে।

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

Gulp স্বয়ংক্রিয়ভাবে একটি default অনুসন্ধান করবে আপনার gulpfile.js-এ টাস্ক যখন আপনি gulp ব্যবহার করেন আদেশ সুতরাং এটি কাজ করার জন্য আপনাকে অবশ্যই ডিফল্ট টাস্কটি রপ্তানি করতে হবে৷

আমাদের ডিফল্ট কাজ নিম্নলিখিত কাজ করবে:

• scssTask চালান এবং jsTask একই সাথে parallel() ব্যবহার করে
• তারপর watchTask চালান

আপনি আরও লক্ষ্য করবেন যে আমরা সেই সমস্ত কাজগুলিকে series()-এর মধ্যে রাখছি ফাংশন।

এটি কীভাবে কাজগুলি পরিচালনা করে তার জন্য এটি Gulp 4-এর প্রধান নতুন পরিবর্তনগুলির মধ্যে একটি- আপনাকে series()-এ সমস্ত কাজ (এমনকি এককও) মোড়ানো প্রয়োজন। অথবা parallel() .

Gulp 4 এ পরিবর্তনগুলি

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

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

টাস্ক তৈরি করার জন্য Gulp-এর অফিসিয়াল নির্দেশিকা অনুসরণ করতে হয়।

Gulp টিম exports ব্যবহার করার পরামর্শ দেয় tasks() এর পরিবর্তে :

সুতরাং, যখন তারা এখনও আপনাকে task() ব্যবহার করতে দেয় ফাংশন, প্রতিটি কাজের জন্য JS ফাংশন তৈরি করা এবং তারপর সেগুলি রপ্তানি করা আরও বর্তমান। যদি আপনি পারেন, আমি এটি প্রতিফলিত করার জন্য আপনার সিনট্যাক্স আপডেট করার সুপারিশ করব, কারণ এটা সম্ভব যে Gulp task()কে অবমূল্যায়ন করবে কোনো সময়ে।

গুলপ 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 সিনট্যাক্সে কাজগুলি

এই কাজগুলিকে একটি সিরিজ() ফাংশনে রাখুন:

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

এবং এটি সম্ভাব্য ক্ষুদ্রতম পরিবর্তনের সাথে টাস্ক ফাংশন ত্রুটিটি ঠিক করবে! 🙂

প্রকল্প ফাইল ডাউনলোড করুন

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

আপনি এটি পরীক্ষা করে দেখতে, কাস্টমাইজ করতে এবং আপনার নিজের প্রকল্পগুলির জন্য এটি ব্যবহার করতে স্বাগত জানাই!

এখানে GitHub সংগ্রহস্থল দেখুন।