წვლილი შეიტანეთ

დაეხმარეთ Bootstrap-ის შემუშავებას ჩვენი დოკუმენტაციის სკრიპტებისა და ტესტების შესაქმნელად.

ამ გვერდზე

ხელსაწყოების დაყენება

Bootstrap იყენებს npm სკრიპტებს დოკუმენტაციის შესაქმნელად და წყაროს ფაილების შედგენისთვის. ჩვენი package.json შეიცავს ამ სკრიპტებს კოდის შედგენისთვის, ტესტების გასაშვებად და სხვა. ეს არ არის განკუთვნილი ჩვენი საცავისა და დოკუმენტაციის გარეთ გამოსაყენებლად.

ჩვენი build სისტემის გამოსაყენებლად და ჩვენი დოკუმენტაციის ადგილობრივად გასაშვებად, დაგჭირდებათ Bootstrap-ის წყარო ფაილების და Node-ის ასლი. მიჰყევით ამ ნაბიჯებს და მზად უნდა იყოთ როკისთვის:

ჩამოტვირთეთ და დააინსტალირეთ Node.js , რომელსაც ვიყენებთ ჩვენი დამოკიდებულებების სამართავად.
ან ჩამოტვირთეთ Bootstrap-ის წყაროები ან ჩაყარეთ Bootstrap-ის საცავი .
გადადით root /bootstrapდირექტორიაში და npm installდააინსტალირეთ ჩვენი ადგილობრივი დამოკიდებულებები, რომლებიც ჩამოთვლილია package.json- ში .

დასრულების შემდეგ, თქვენ შეძლებთ ბრძანების ხაზიდან მოწოდებული სხვადასხვა ბრძანებების გაშვებას.

npm სკრიპტების გამოყენება

ჩვენი package.json მოიცავს უამრავ ამოცანას პროექტის განვითარებისთვის. გაუშვით npm runყველა npm სკრიპტის სანახავად თქვენს ტერმინალში. ძირითადი ამოცანები მოიცავს:

დავალება	აღწერა
`npm start`	ადგენს CSS და JavaScript-ს, აყალიბებს დოკუმენტაციას და იწყებს ლოკალურ სერვერს.
`npm run dist`	ქმნის `dist/`დირექტორიას კომპილირებული ფაილებით. იყენებს Sass , Autoprefixer და Terser .
`npm test`	გაშვების შემდეგ ატარებს ტესტებს ადგილობრივად`npm run dist`
`npm run docs-serve`	აშენებს და აწარმოებს დოკუმენტაციას ადგილობრივად.

დაიწყეთ Bootstrap–ით npm–ით ჩვენი დამწყები პროექტით! გადადით twbs /bootstrap-npm-starter შაბლონის საცავში, რათა ნახოთ, თუ როგორ უნდა ააწყოთ და დააკონფიგურიროთ Bootstrap საკუთარ npm პროექტში. მოყვება Sass შემდგენელი, Autoprefixer, Stylelint, PurgeCSS და Bootstrap ხატები.

სას

Bootstrap იყენებს Dart Sass- ს ჩვენი Sass-ის წყარო ფაილების CSS ფაილებად შედგენისთვის (ჩართულია ჩვენი შექმნის პროცესში) და გირჩევთ იგივე გააკეთოთ, თუ Sass-ს აწყობთ თქვენი საკუთარი აქტივების მილსადენის გამოყენებით. ჩვენ ადრე ვიყენებდით Node Sass-ს Bootstrap v4-ისთვის, მაგრამ LibSass და მასზე აგებული პაკეტები, Node Sass-ის ჩათვლით, ახლა მოძველებულია .

Dart Sass იყენებს დამრგვალების სიზუსტეს 10 და ეფექტურობის მიზეზების გამო არ იძლევა ამ მნიშვნელობის კორექტირებას. ჩვენ არ ვამცირებთ ამ სიზუსტეს ჩვენი გენერირებული CSS-ის შემდგომი დამუშავების დროს, მაგალითად, მინიფიკაციის დროს, მაგრამ თუ ასე აირჩევთ, გირჩევთ შეინარჩუნოთ სიზუსტე მინიმუმ 6, რათა თავიდან აიცილოთ პრობლემები ბრაუზერის დამრგვალებასთან დაკავშირებით.

ავტოპრეფიქსერი

Bootstrap იყენებს Autoprefixer-ს (ჩართულია ჩვენს შექმნის პროცესში), რათა ავტომატურად დაამატოს გამყიდველის პრეფიქსები ზოგიერთ CSS თვისებას აშენების დროს. ამით დაზოგავთ დროსა და კოდს, რაც საშუალებას გვაძლევს დავწეროთ ჩვენი CSS-ის ძირითადი ნაწილები ერთჯერადად, ხოლო აღმოვფხვრათ გამყიდველის მიქსინების საჭიროება, როგორიცაა v3-ში.

ჩვენ ვინახავთ ბრაუზერების სიას, რომლებიც მხარდაჭერილია Autoprefixer-ის მეშვეობით, ცალკე ფაილში ჩვენს GitHub საცავში. იხილეთ .browserslistrc დეტალებისთვის.

RTLCSS

Bootstrap იყენებს RTLCSS- ს კომპილირებული CSS-ის დასამუშავებლად და RTL-ად გადაქცევისთვის – ძირითადად ანაცვლებს ჰორიზონტალურ მიმართულების ცნობილ თვისებებს (მაგ padding-left.) მათი საპირისპიროდ. ის გვაძლევს საშუალებას მხოლოდ ერთხელ დავწეროთ ჩვენი CSS და გავაკეთოთ მცირე შესწორებები RTLCSS კონტროლისა და ღირებულების დირექტივების გამოყენებით.

ადგილობრივი დოკუმენტაცია

ჩვენი დოკუმენტაციის ადგილობრივად გაშვება მოითხოვს Hugo-ს გამოყენებას, რომელიც დაინსტალირებულია hugo-bin npm პაკეტის მეშვეობით. Hugo არის უაღრესად სწრაფი და საკმაოდ გაფართოებადი სტატიკური საიტის გენერატორი, რომელიც გვაწვდის: ძირითადი მოიცავს, Markdown-ზე დაფუძნებულ ფაილებს, შაბლონებს და სხვა. აი, როგორ უნდა დაიწყოთ:

გაიარეთ ხელსაწყოების დაყენება ზემოთ, რომ დააინსტალიროთ ყველა დამოკიდებულება.
root /bootstrapდირექტორიადან, გაუშვით npm run docs-serveბრძანების სტრიქონში.
გახსენით http://localhost:9001/თქვენს ბრაუზერში და voilà.

შეიტყვეთ მეტი Hugo-ს გამოყენების შესახებ მისი დოკუმენტაციის წაკითხვით .

Დიაგნოსტიკა

თუ დამოკიდებულებების დაყენებისას პრობლემები შეგექმნათ, წაშალეთ დამოკიდებულების ყველა წინა ვერსია (გლობალური და ადგილობრივი). შემდეგ, ხელახლა გაუშვით npm install.