সরঞ্জাম তৈরি করুন
আমাদের ডকুমেন্টেশন তৈরি করতে, সোর্স কোড কম্পাইল করতে, পরীক্ষা চালাতে এবং আরও অনেক কিছু করতে বুটস্ট্র্যাপের অন্তর্ভুক্ত npm স্ক্রিপ্টগুলি কীভাবে ব্যবহার করবেন তা শিখুন।
টুলিং সেটআপ
বুটস্ট্র্যাপ তার বিল্ড সিস্টেমের জন্য npm স্ক্রিপ্ট ব্যবহার করে। আমাদের package.json- এ ফ্রেমওয়ার্কের সাথে কাজ করার সুবিধাজনক পদ্ধতি রয়েছে, যার মধ্যে রয়েছে কোড কম্পাইল করা, পরীক্ষা চালানো এবং আরও অনেক কিছু।
আমাদের বিল্ড সিস্টেম ব্যবহার করতে এবং স্থানীয়ভাবে আমাদের ডকুমেন্টেশন চালাতে, আপনার বুটস্ট্র্যাপের সোর্স ফাইল এবং নোডের একটি অনুলিপি প্রয়োজন। এই পদক্ষেপগুলি অনুসরণ করুন এবং আপনার রক করার জন্য প্রস্তুত হওয়া উচিত:
- Node.js ডাউনলোড এবং ইনস্টল করুন , যা আমরা আমাদের নির্ভরতা পরিচালনা করতে ব্যবহার করি।
- হয় বুটস্ট্র্যাপের উৎস ডাউনলোড করুন অথবা বুটস্ট্র্যাপের সংগ্রহস্থল ফর্ক করুন ।
/bootstrapরুট ডিরেক্টরিতে নেভিগেট করুন এবং package.json-npm installএ তালিকাভুক্ত আমাদের স্থানীয় নির্ভরতা ইনস্টল করতে চালান ।
সম্পন্ন হলে, আপনি কমান্ড লাইন থেকে প্রদত্ত বিভিন্ন কমান্ড চালাতে সক্ষম হবেন।
npm স্ক্রিপ্ট ব্যবহার করে
আমাদের package.json প্রকল্পের উন্নয়নের জন্য অসংখ্য কাজ অন্তর্ভুক্ত করে। npm runআপনার টার্মিনালে সমস্ত এনপিএম স্ক্রিপ্ট দেখতে চালান । প্রাথমিক কাজ অন্তর্ভুক্ত:
| টাস্ক | বর্ণনা |
|---|---|
npm start |
CSS এবং JavaScript কম্পাইল করে, ডকুমেন্টেশন তৈরি করে এবং একটি স্থানীয় সার্ভার শুরু করে। |
npm run dist |
dist/কম্পাইল করা ফাইল দিয়ে ডিরেক্টরি তৈরি করে । Sass , Autoprefixer , এবং terser প্রয়োজন । |
npm test |
দৌড়ানোর পর স্থানীয়ভাবে পরীক্ষা চালায়npm run dist |
npm run docs-serve |
স্থানীয়ভাবে ডকুমেন্টেশন তৈরি করে এবং চালায়। |
সস
বুটস্ট্র্যাপ আমাদের Sass সোর্স ফাইলগুলিকে CSS ফাইলে কম্পাইল করার জন্য ডার্ট Sass ব্যবহার করে (আমাদের বিল্ড প্রক্রিয়ায় অন্তর্ভুক্ত), এবং আমরা আপনাকে একই কাজ করার পরামর্শ দিই যদি আপনি আপনার নিজস্ব সম্পদ পাইপলাইন ব্যবহার করে Sass কম্পাইল করেন। আমরা আগে Bootstrap v4 এর জন্য Node Sass ব্যবহার করতাম, কিন্তু LibSass এবং এর উপরে নির্মিত প্যাকেজগুলি, যার মধ্যে Node Sass সহ, এখন অবহেলিত ।
ডার্ট সাস 10 এর বৃত্তাকার নির্ভুলতা ব্যবহার করে এবং দক্ষতার কারণে এই মানটির সমন্বয়ের অনুমতি দেয় না। আমরা আমাদের জেনারেট করা CSS-এর আরও প্রক্রিয়াকরণের সময় এই নির্ভুলতা কম করি না, যেমন মিনফিকেশনের সময়, কিন্তু আপনি যদি তা করতে চান তবে আমরা ব্রাউজার রাউন্ডিং সংক্রান্ত সমস্যা রোধ করতে কমপক্ষে 6 এর নির্ভুলতা বজায় রাখার পরামর্শ দিই।
অটোপ্রিফিক্সার
বুটস্ট্র্যাপ অটোপ্রেফিক্সার ব্যবহার করে (আমাদের বিল্ড প্রক্রিয়ায় অন্তর্ভুক্ত) বিল্ড টাইমে কিছু সিএসএস বৈশিষ্ট্যে স্বয়ংক্রিয়ভাবে ভেন্ডর প্রিফিক্স যোগ করতে। এটি করা আমাদের সময় এবং কোড বাঁচায় এবং আমাদের সিএসএসের মূল অংশগুলিকে একক সময় লিখতে দেয় যখন v3 তে পাওয়া যায় এমন বিক্রেতা মিশ্রণের প্রয়োজনীয়তা দূর করে।
আমরা আমাদের GitHub সংগ্রহস্থলের মধ্যে একটি পৃথক ফাইলে Autoprefixer এর মাধ্যমে সমর্থিত ব্রাউজারগুলির তালিকা বজায় রাখি। বিস্তারিত জানার জন্য .browserslistrc দেখুন ।
RTLCSS
বুটস্ট্র্যাপ সংকলিত সিএসএস প্রক্রিয়া করতে RTLCSS ব্যবহার করে এবং সেগুলিকে RTL-এ রূপান্তর করে - মূলত অনুভূমিক দিক সচেতন বৈশিষ্ট্যগুলি (যেমন padding-left) তাদের বিপরীতে প্রতিস্থাপন করে। এটি আমাদের শুধুমাত্র একবার আমাদের CSS লিখতে এবং RTLCSS নিয়ন্ত্রণ এবং মান নির্দেশাবলী ব্যবহার করে ছোটখাট পরিবর্তন করতে দেয়।
স্থানীয় ডকুমেন্টেশন
স্থানীয়ভাবে আমাদের ডকুমেন্টেশন চালানোর জন্য Hugo ব্যবহার করা প্রয়োজন, যা hugo -bin npm প্যাকেজের মাধ্যমে ইনস্টল করা হয় । Hugo হল একটি উজ্জ্বল দ্রুত এবং বেশ এক্সটেনসিবল স্ট্যাটিক সাইট জেনারেটর যা আমাদের প্রদান করে: মৌলিক অন্তর্ভুক্ত, মার্কডাউন-ভিত্তিক ফাইল, টেমপ্লেট এবং আরও অনেক কিছু। এটি কীভাবে শুরু করবেন তা এখানে:
- সমস্ত নির্ভরতা ইনস্টল করতে উপরের টুলিং সেটআপের মাধ্যমে চালান ।
- রুট
/bootstrapডিরেক্টরি থেকে,npm run docs-serveকমান্ড লাইনে চালান। - আপনার ব্রাউজারে খুলুন
http://localhost:9001/, এবং voilà.
এর ডকুমেন্টেশন পড়ে Hugo ব্যবহার সম্পর্কে আরও জানুন ।
সমস্যা সমাধান
আপনি যদি নির্ভরতা ইনস্টল করার সময় সমস্যার সম্মুখীন হন, তাহলে পূর্ববর্তী সমস্ত নির্ভরতা সংস্করণ (গ্লোবাল এবং স্থানীয়) আনইনস্টল করুন। তারপর, পুনরায় চালান npm install।