in English

ააშენეთ ხელსაწყოები

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

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

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

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

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

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

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

ჩვენი package.json მოიცავს შემდეგ ბრძანებებს და დავალებებს:

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

გაუშვით npm runყველა npm სკრიპტის სანახავად.

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

სას

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

თუ თქვენ გჭირდებათ Sass-ის უფრო ახალი ფუნქციები ან თავსებადობა უახლეს CSS სტანდარტებთან, Dart Sass ახლა არის Sass-ის პირველადი იმპლემენტაცია და მხარს უჭერს JavaScript API-ს, რომელიც სრულად თავსებადია Node Sass-თან (რამდენიმე გამონაკლისებით, რომლებიც ჩამოთვლილია Dart Sass-ის GitHub გვერდზე ).

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

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

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

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

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

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

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

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

Დიაგნოსტიკა

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