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