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

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

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

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

1. Κατεβάστε και εγκαταστήστε το Node.js , το οποίο χρησιμοποιούμε για να διαχειριστούμε τις εξαρτήσεις μας.
2. Είτε κατεβάστε τις πηγές του Bootstrap είτε διαχωρίστε το αποθετήριο του Bootstrap .
3. Μεταβείτε στον ριζικό /bootstrapκατάλογο και εκτελέστε npm installτην εγκατάσταση των τοπικών μας εξαρτήσεων που αναφέρονται στο package.json .

Όταν ολοκληρωθεί, θα μπορείτε να εκτελέσετε τις διάφορες εντολές που παρέχονται από τη γραμμή εντολών.

Χρήση σεναρίων npm

Το package.json μας περιλαμβάνει πολλές εργασίες για την ανάπτυξη του έργου. Εκτελέστε npm runγια να δείτε όλα τα σενάρια npm στο τερματικό σας. Τα κύρια καθήκοντα περιλαμβάνουν:

Sass

Το Bootstrap χρησιμοποιεί το Dart Sass για τη μεταγλώττιση των αρχείων πηγ��ς Sass σε αρχεία CSS (περιλαμβάνονται στη διαδικασία κατασκευής μας) και σας συνιστούμε να κάνετε το ίδιο εάν κάνετε μεταγλώττιση του Sass χρησιμοποιώντας τη δική σας διοχέτευση στοιχείων. Στο παρελθόν χρησιμοποιούσαμε το Node Sass για το Bootstrap v4, αλλά το LibSass και τα πακέτα που είναι χτισμένα πάνω του, συμπεριλαμβανομένου του Node Sass, έχουν πλέον καταργηθεί .

Το Dart Sass χρησιμοποιεί ακρίβεια στρογγυλοποίησης 10 και για λόγους αποτελεσματικότητας δεν επιτρέπει την προσαρμογή αυτής της τιμής. Δεν μειώνουμε αυτήν την ακρίβεια κατά την περαιτέρω επεξεργασία του CSS που δημιουργείται, όπως κατά τη διάρκεια της ελαχιστοποίησης, αλλά εάν το επιλέξετε, συνιστούμε να διατηρήσετε μια ακρίβεια τουλάχιστον 6 για να αποτρέψετε προβλήματα με τη στρογγυλοποίηση του προγράμματος περιήγησης.

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

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

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

RTLCSS

Το Bootstrap χρησιμοποιεί το RTLCSS για να επεξεργαστεί μεταγλωττισμένα CSS και να τα μετατρέψει σε RTL – αντικαθιστώντας βασικά τις ιδιότητες με επίγνωση της οριζόντιας κατεύθυνσης (π.χ. padding-left) με το αντίθετό τους. Μας επιτρέπει να γράφουμε το CSS μας μόνο μία φορά και να κάνουμε μικρές τροποποιήσεις χρησιμοποιώντας οδηγίες ελέγχου και τιμής RTLCSS .

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

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

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

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

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

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