கருவிகளை உருவாக்குங்கள்
எங்கள் ஆவணங்களை உருவாக்க, மூலக் குறியீட்டை தொகுக்க, சோதனைகளை இயக்க மற்றும் பலவற்றிற்கு பூட்ஸ்டார்ப்பில் உள்ள npm ஸ்கிரிப்ட்களை எவ்வாறு பயன்படுத்துவது என்பதை அறியவும்.
கருவி அமைப்பு
பூட்ஸ்டார்ப் அதன் உருவாக்க அமைப்புக்கு npm ஸ்கிரிப்ட்களைப் பயன்படுத்துகிறது. எங்கள் package.json ஆனது கட்டமைப்புடன் வேலை செய்வதற்கான வசதியான முறைகளை உள்ளடக்கியது, இதில் குறியீடு தொகுத்தல், இயங்கும் சோதனைகள் மற்றும் பல.
எங்கள் உருவாக்க அமைப்பைப் பயன்படுத்தவும், எங்கள் ஆவணங்களை உள்நாட்டில் இயக்கவும், பூட்ஸ்டார்ப்பின் மூலக் கோப்புகள் மற்றும் முனையின் நகல் உங்களுக்குத் தேவைப்படும். இந்த படிகளைப் பின்பற்றவும், நீங்கள் ராக் செய்ய தயாராக இருக்க வேண்டும்:
- Node.js ஐப் பதிவிறக்கி நிறுவவும் , இதை நாங்கள் எங்கள் சார்புகளை நிர்வகிக்கப் பயன்படுத்துகிறோம்.
- பூட்ஸ்டார்ப்பின் ஆதாரங்களைப் பதிவிறக்கவும் அல்லது பூட்ஸ்டார்ப்பின் களஞ்சியத்தை ஃபோர்க் செய்யவும் .
- ரூட்
/bootstrap
கோப்பகத்திற்குச் சென்று , pack.jsonnpm install
இல் பட்டியலிடப்பட்டுள்ள எங்கள் உள்ளூர் சார்புகளை நிறுவ இயக்கவும் .
முடிந்ததும், கட்டளை வரியிலிருந்து வழங்கப்பட்ட பல்வேறு கட்டளைகளை நீங்கள் இயக்க முடியும்.
npm ஸ்கிரிப்ட்களைப் பயன்படுத்துதல்
எங்கள் package.json திட்டத்தை உருவாக்குவதற்கான பல பணிகளை உள்ளடக்கியது. npm run
உங்கள் டெர்மினலில் உள்ள அனைத்து npm ஸ்கிரிப்ட்களையும் பார்க்க இயக்கவும் . முதன்மை பணிகளில் பின்வருவன அடங்கும்:
பணி | விளக்கம் |
---|---|
npm start |
CSS மற்றும் ஜாவாஸ்கிரிப்டை தொகுக்கிறது, ஆவணங்களை உருவாக்குகிறது மற்றும் உள்ளூர் சேவையகத்தைத் தொடங்குகிறது. |
npm run dist |
dist/ தொகுக்கப்பட்ட கோப்புகளுடன் கோப்பகத்தை உருவாக்குகிறது . Sass , Autoprefixer மற்றும் terser தேவை . |
npm test |
இயங்கிய பிறகு உள்ளூரில் சோதனைகளை இயக்குகிறதுnpm run dist |
npm run docs-serve |
உள்நாட்டில் ஆவணங்களை உருவாக்கி இயக்குகிறது. |
சாஸ்
பூட்ஸ்டார்ப் எங்கள் Sass மூலக் கோப்புகளை CSS கோப்புகளில் தொகுக்க டார்ட் சாஸைப் பயன்படுத்துகிறது (எங்கள் உருவாக்கச் செயல்பாட்டில் சேர்க்கப்பட்டுள்ளது), மேலும் நீங்கள் உங்கள் சொந்த சொத்து பைப்லைனைப் பயன்படுத்தி Sass ஐ தொகுத்தால் அதையே செய்யுமாறு பரிந்துரைக்கிறோம். நாங்கள் முன்பு Bootstrap v4 க்கு Node Sass ஐப் பயன்படுத்தினோம், ஆனால் LibSass மற்றும் Node Sass உட்பட அதன் மேல் கட்டப்பட்ட தொகுப்புகள் இப்போது நிறுத்தப்பட்டுள்ளன .
டார்ட் சாஸ் 10 இன் ரவுண்டிங் துல்லியத்தைப் பயன்படுத்துகிறது மற்றும் செயல்திறன் காரணங்களுக்காக இந்த மதிப்பை சரிசெய்ய அனுமதிக்காது. எங்களால் உருவாக்கப்பட்ட CSS இன் மேலும் செயலாக்கத்தின் போது இந்த துல்லியத்தை நாங்கள் குறைக்க மாட்டோம், ஆனால் நீங்கள் அவ்வாறு செய்ய விரும்பினால், உலாவி ரவுண்டிங்கில் சிக்கல்களைத் தடுக்க குறைந்தபட்சம் 6 துல்லியத்தை பராமரிக்க பரிந்துரைக்கிறோம்.
தன்னியக்க முன்னொட்டு
உருவாக்க நேரத்தில் சில CSS பண்புகளில் தானாக விற்பனையாளர் முன்னொட்டுகளைச் சேர்க்க பூட்ஸ்டார்ப் Autoprefixer (எங்கள் உருவாக்க செயல்பாட்டில் சேர்க்கப்பட்டுள்ளது) பயன்படுத்துகிறது. அவ்வாறு செய்வது, v3 இல் காணப்படுவது போன்ற விற்பனையாளர் மிக்ஸின்களின் தேவையை நீக்கும் அதே வேளையில், எங்கள் CSS இன் முக்கிய பகுதிகளை ஒரே நேரத்தில் எழுத அனுமதிப்பதன் மூலம் எங்களுக்கு நேரத்தையும் குறியீட்டையும் சேமிக்கிறது.
எங்களின் GitHub களஞ்சியத்தில் உள்ள தனி கோப்பில் Autoprefixer மூலம் ஆதரிக்கப்படும் உலாவிகளின் பட்டியலை நாங்கள் பராமரிக்கிறோம். விவரங்களுக்கு .browserslistrc ஐப் பார்க்கவும்.
RTLCSS
Bootstrap uses RTLCSS to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (eg. padding-left
) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS control and value directives.
Local documentation
Running our documentation locally requires the use of Hugo, which gets installed via the hugo-bin npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:
- Run through the tooling setup above to install all dependencies.
- ரூட்
/bootstrap
கோப்பகத்திலிருந்து,npm run docs-serve
கட்டளை வரியில் இயக்கவும். - உங்கள் உலாவியில் திறக்கவும்
http://localhost:9001/
, மற்றும் voilà.
அதன் ஆவணங்களைப் படிப்பதன் மூலம் ஹ்யூகோவைப் பயன்படுத்துவது பற்றி மேலும் அறிக .
பழுது நீக்கும்
சார்புகளை நிறுவுவதில் சிக்கல் ஏற்பட்டால், முந்தைய அனைத்து சார்பு பதிப்புகளையும் (உலகளாவிய மற்றும் உள்ளூர்) நிறுவல் நீக்கவும். பின்னர், மீண்டும் இயக்கவும் npm install
.