in English

Κατασκευάστε εργαλεία

Μάθετε πώς να χρησιμοποιείτε τα σενάρια npm που περιλαμβάνονται στο Bootstrap για να δημιουργήσετε την τεκμηρίωσή μας, να μεταγλωττίσετε τον πηγαίο κώδικα, να εκτελέσετε δοκιμές και πολλά άλλα.

Ρύθμιση εργαλείων

Το Bootstrap χρησιμοποιεί σενάρια npm για το σύστημα κατασκευής του. Το package.json μας περιλαμβάνει βολικές μεθόδους για την εργασία με το πλαίσιο, συμπεριλαμβανομένης της μεταγλώττισης κώδικα, της εκτέλεσης δοκιμών και άλλων.

Για να χρησιμοποιήσετε το σύστημα κατασκευής μας και να εκτελέσετε την τεκμηρίωσή μας τοπικά, θα χρειαστείτε ένα αντίγραφο των αρχείων πηγής και του κόμβου του Bootstrap. Ακολουθήστε αυτά τα βήματα και θα πρέπει να είστε έτοιμοι να ροκάρετε:

  1. Κατεβάστε και εγκαταστήστε το Node.js , το οποίο χρησιμοποιούμε για να διαχειριστούμε τις εξαρτήσεις μας.
  2. Είτε κατεβάστε τις πηγές του Bootstrap είτε διαχωρίστε το αποθετήριο του Bootstrap .
  3. Μεταβείτε στον ριζικό /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, Αυτόματο πρόθεμα, Stylelint, PurgeCSS και Εικονίδια Bootstrap.

Sass

Το Bootstrap v4 χρησιμοποιεί το Node Sass για τη μεταγλώττιση των αρχείων πηγής Sass σε αρχεία CSS (περιλαμβάνονται στη διαδικασία κατασκευής). Προκειμένου να καταλήξετε με το ίδιο παραγόμενο CSS κατά τη μεταγλώττιση του Sass χρησιμοποιώντας τη δική σας διοχέτευση στοιχείων, θα χρειαστεί να χρησιμοποιήσετε έναν μεταγλωττιστή Sass που να υποστηρίζει τουλάχιστον τις δυνατότητες που κάνει το Node Sass. Αυτό είναι σημαντικό να σημειωθεί, επειδή από τις 26 Οκτωβρίου 2020, το LibSass και τα πακέτα που έχουν δημιουργηθεί πάνω του —συμπεριλαμβανομένου του Node Sass— έχουν καταργηθεί .

Εάν χρειάζεστε νεότερες δυνατότητες Sass ή συμβατότητα με νεότερα πρότυπα CSS, το Dart Sass είναι πλέον η κύρια εφαρμογή του Sass και υποστηρίζει ένα JavaScript API που είναι πλήρως συμβατό με το Node Sass (με μερικές εξαιρέσεις που αναφέρονται στη σελίδα GitHub του Dart Sass ).

Αυξάνουμε την ακρίβεια στρογγυλοποίησης Sass στο 6 (από προεπιλογή, είναι 5 στο Node Sass) για να αποτρέψουμε προβλήματα με τη στρογγυλοποίηση του προγράμματος περιήγησης. Εάν χρησιμοποιείτε το Dart Sass, αυτό δεν θα πρέπει να προσαρμόσετε, καθώς αυτός ο μεταγλωττιστής χρησιμοποιεί ακρίβεια στρογγυλοποίησης 10 και για λόγους αποτελεσματικότητας δεν επιτρέπει την προσαρμογή του.

Αυτόματο πρόθεμα

Το Bootstrap χρησιμοποιεί το Autoprefixer (περιλαμβάνεται στη διαδικασία κατασκευής μας) για να προσθέτει αυτόματα προθέματα προμηθευτή σε ορισμένες ιδιότητες CSS κατά το χρόνο κατασκευής. Με αυτόν τον τρόπο εξοικονομούμε χρόνο και κώδικα, επιτρέποντάς μας να γράφουμε βασικά μέρη του CSS μας μία φορά, ενώ εξαλείφουμε την ανάγκη για mixins προμηθευτών όπως αυτά που υπάρχουν στο v3.

Διατηρούμε τη λίστα των προγραμμάτων περιήγησης που υποστηρίζονται μέσω του Autoprefixer σε ένα ξεχωριστό αρχείο εντός του αποθετηρίου GitHub. Δείτε το .browserslistrc για λεπτομέρειες.

Τοπική τεκμηρίωση

Για την τοπική εκτέλεση της τεκμηρίωσής μας απαιτείται η χρήση του Hugo, το οποίο εγκαθίσταται μέσω του πακέτου hugo-bin npm. Το Hugo είναι μια απίστευτα γρήγορη και αρκετά επεκτάσιμη δημιουργία στατικών τοποθεσιών που μας παρέχει: βασικά περιεχόμενα, αρχεία που βασίζονται σε Markdown, πρότυπα και πολλά άλλα. Δείτε πώς μπορείτε να το ξεκινήσετε:

  1. Εκτελέστε την παραπάνω ρύθμιση εργαλείων για να εγκαταστήσετε όλες τις εξαρτήσεις.
  2. Από τον ριζικό /bootstrapκατάλογο, εκτελέστε npm run docs-serveτη γραμμή εντολών.
  3. Ανοίξτε http://localhost:9001/στο πρόγραμμα περιήγησής σας και voilà.

Μάθετε περισσότερα σχετικά με τη χρήση του Hugo διαβάζοντας την τεκμηρίωσή του .

Αντιμετώπιση προβλημάτων

Εάν αντιμετωπίσετε προβλήματα με την εγκατάσταση εξαρτήσεων, απεγκαταστήστε όλες τις προηγούμενες εκδόσεις εξαρτήσεων (καθολικές και τοπικές). Στη συνέχεια, επανάληψη npm install.