in English

اوزار بنائیں

ہمارے دستاویزات بنانے، سورس کوڈ کو مرتب کرنے، ٹیسٹ چلانے اور مزید بہت کچھ کرنے کے لیے بوٹسٹریپ کے شامل کردہ npm اسکرپٹس کو استعمال کرنے کا طریقہ سیکھیں۔

ٹولنگ سیٹ اپ

بوٹسٹریپ اپنے بلڈ سسٹم کے لیے این پی ایم اسکرپٹس کا استعمال کرتا ہے۔ ہمارے package.json میں فریم ورک کے ساتھ کام کرنے کے لیے آسان طریقے شامل ہیں، بشمول کوڈ مرتب کرنا، ٹیسٹ چلانا، اور بہت کچھ۔

ہمارے بلڈ سسٹم کو استعمال کرنے اور ہماری دستاویزات کو مقامی طور پر چلانے کے لیے، آپ کو بوٹسٹریپ کی سورس فائلز اور نوڈ کی ایک کاپی درکار ہوگی۔ ان اقدامات پر عمل کریں اور آپ کو ہلانے کے لیے تیار ہونا چاہیے:

  1. ڈاؤن لوڈ اور انسٹال کریں Node.js ، جسے ہم اپنے انحصار کو منظم کرنے کے لیے استعمال کرتے ہیں۔
  2. یا تو بوٹسٹریپ کے ذرائع کو ڈاؤن لوڈ کریں یا بوٹسٹریپ کے ذخیرے کو فورک کریں۔
  3. روٹ /bootstrapڈائرکٹری پر جائیں اور پیکج. jsonnpm install میں درج ہماری مقامی انحصار کو انسٹال کرنے کے لیے چلائیں ۔

مکمل ہونے پر، آپ کمانڈ لائن سے فراہم کردہ مختلف کمانڈز کو چلانے کے قابل ہو جائیں گے۔

این پی ایم اسکرپٹس کا استعمال

ہمارے package.json میں درج ذیل کمانڈز اور کام شامل ہیں:

کام تفصیل
npm run dist npm run dist/dist/مرتب شدہ فائلوں کے ساتھ ڈائریکٹری بناتا ہے ۔ Sass , Autoprefixer , اور terser استعمال کرتا ہے ۔
npm test چلانے کے بعد مقامی طور پر ٹیسٹ چلاتا ہے۔npm run dist
npm run docs-serve مقامی طور پر دستاویزات بناتا اور چلاتا ہے۔

تمام npm npm runاسکرپٹ دیکھنے کے لیے دوڑیں۔

ہمارے اسٹارٹر پروجیکٹ کے ساتھ npm کے ذریعے Bootstrap کے ساتھ شروع کریں! twbs /bootstrap-npm-starter ٹیمپلیٹ ریپوزٹری کی طرف جائیں یہ دیکھنے کے لیے کہ آپ کے اپنے npm پروجیکٹ میں بوٹسٹریپ کو کیسے بنایا جائے اور کس طرح اپنی مرضی کے مطابق بنایا جائے۔ Sass compiler، Autoprefixer، Stylelint، PurgeCSS، اور Bootstrap شبیہیں شامل ہیں۔

سس

Bootstrap v4 ہماری Sass سورس فائلوں کو CSS فائلوں میں مرتب کرنے کے لیے Node Sass کا استعمال کرتا ہے (ہماری تعمیر کے عمل میں شامل ہے)۔ اپنی اپنی اثاثہ پائپ لائن کا استعمال کرتے ہوئے Sass کو مرتب کرتے وقت اسی پیدا کردہ CSS کے ساتھ ختم کرنے کے لیے، آپ کو ایک Sass کمپائلر استعمال کرنے کی ضرورت ہوگی جو کم از کم ان خصوصیات کو سپورٹ کرتا ہو جو Node Sass کرتا ہے۔ یہ نوٹ کرنا ضروری ہے کیونکہ 26 اکتوبر 2020 تک، LibSass اور اس کے اوپر بنائے گئے پیکجز — بشمول Node Sass — فرسودہ ہیں ۔

اگر آپ کو Sass کی نئی خصوصیات یا نئے CSS معیارات کے ساتھ مطابقت درکار ہے تو، Dart Sass اب Sass کا بنیادی نفاذ ہے اور ایک JavaScript API کو سپورٹ کرتا ہے جو Node Sass کے ساتھ مکمل طور پر مطابقت رکھتا ہے (Dart Sass کے GitHub صفحہ پر درج چند مستثنیات کے ساتھ )۔

ہم براؤزر راؤنڈنگ کے مسائل کو روکنے کے لیے ساس راؤنڈنگ کی درستگی کو بڑھا کر 6 کر دیتے ہیں (بطور ڈیفالٹ، نوڈ ساس میں یہ 5 ہے)۔ اگر آپ ڈارٹ ساس استعمال کرتے ہیں تو یہ وہ چیز نہیں ہوگی جس کی آپ کو ایڈجسٹ کرنے کی ضرورت ہے، کیونکہ وہ کمپائلر 10 کی گول درستگی کا استعمال کرتا ہے اور کارکردگی کی وجوہات کی بناء پر اسے ایڈجسٹ کرنے کی اجازت نہیں دیتا ہے۔

آٹوپریفکسر

بوٹسٹریپ Autoprefixer (ہمارے تعمیراتی عمل میں شامل ہے) کا استعمال کرتا ہے تاکہ خود بخود وینڈر کے سابقے کو کچھ CSS خصوصیات میں تعمیر کے وقت شامل کیا جا سکے۔ ایسا کرنے سے ہمارے وقت اور کوڈ کی بچت ہوتی ہے اور ہمیں اپنے CSS کے کلیدی حصوں کو ایک بار لکھنے کی اجازت دیتا ہے جبکہ v3 میں پائے جانے والے وینڈر مکسنس کی ضرورت کو ختم کر دیتا ہے۔

ہم اپنے GitHub ریپوزٹری کے اندر ایک علیحدہ فائل میں Autoprefixer کے ذریعے تعاون یافتہ براؤزرز کی فہرست کو برقرار رکھتے ہیں۔ تفصیلات کے لیے .browserslistrc دیکھیں ۔

مقامی دستاویزات

ہماری دستاویزات کو مقامی طور پر چلانے کے لیے ہیوگو کے استعمال کی ضرورت ہوتی ہے، جو ہیوگو بن این پی ایم پیکیج کے ذریعے انسٹال ہوتا ہے ۔ ہیوگو ایک انتہائی تیز اور کافی حد تک قابل توسیع جامد سائٹ جنریٹر ہے جو ہمیں فراہم کرتا ہے: بنیادی شامل ہیں، مارک ڈاؤن پر مبنی فائلیں، ٹیمپلیٹس، اور بہت کچھ۔ اسے شروع کرنے کا طریقہ یہاں ہے:

  1. تمام انحصار کو انسٹال کرنے کے لیے اوپر والے ٹولنگ سیٹ اپ کے ذریعے چلائیں ۔
  2. روٹ /bootstrapڈائرکٹری سے، npm run docs-serveکمانڈ لائن میں چلائیں۔
  3. اپنے براؤزر میں کھولیں http://localhost:9001/، اور voilà۔

ہیوگو کے استعمال کے بارے میں مزید جانیں اس کی دستاویزات پڑھ کر ۔

خرابیوں کا سراغ لگانا

اگر آپ کو انحصار کو انسٹال کرنے میں دشواری کا سامنا کرنا پڑتا ہے تو، تمام پچھلے انحصاری ورژن (عالمی اور مقامی) کو ان انسٹال کریں۔ پھر، دوبارہ چلائیں npm install.