கருவிகளை உருவாக்குங்கள்
எங்கள் ஆவணங்களை உருவாக்க, மூலக் குறியீட்டை தொகுக்க, சோதனைகளை இயக்க மற்றும் பலவற்றிற்கு பூட்ஸ்டார்ப்பில் உள்ள npm ஸ்கிரிப்ட்களை எவ்வாறு பயன்படுத்துவது என்பதை அறிக.
கருவி அமைப்பு
பூட்ஸ்டார்ப் அதன் உருவாக்க அமைப்புக்கு npm ஸ்கிரிப்ட்களைப் பயன்படுத்துகிறது. எங்கள் package.json ஆனது கட்டமைப்புடன் வேலை செய்வதற்கான வசதியான முறைகளை உள்ளடக்கியது, இதில் குறியீடு தொகுத்தல், இயங்கும் சோதனைகள் மற்றும் பல.
எங்கள் உருவாக்க அமைப்பைப் பயன்படுத்தவும், எங்கள் ஆவணங்களை உள்நாட்டில் இயக்கவும், பூட்ஸ்டார்ப்பின் மூலக் கோப்புகள் மற்றும் முனையின் நகல் உங்களுக்குத் தேவைப்படும். இந்த படிகளைப் பின்பற்றவும், நீங்கள் ராக் செய்ய தயாராக இருக்க வேண்டும்:
- Node.js ஐப் பதிவிறக்கி நிறுவவும் , இதை நாங்கள் எங்கள் சார்புகளை நிர்வகிக்கப் பயன்படுத்துகிறோம்.
- பூட்ஸ்டார்ப்பின் ஆதாரங்களைப் பதிவிறக்கவும் அல்லது பூட்ஸ்டார்ப்பின் களஞ்சியத்தை ஃபோர்க் செய்யவும் .
- ரூட்
/bootstrap
கோப்பகத்திற்குச் சென்று , pack.jsonnpm install
இல் பட்டியலிடப்பட்டுள்ள எங்கள் உள்ளூர் சார்புகளை நிறுவ இயக்கவும் .
முடிந்ததும், கட்டளை வரியிலிருந்து வழங்கப்பட்ட பல்வேறு கட்டளைகளை நீங்கள் இயக்க முடியும்.
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 ஸ்கிரிப்ட்களையும் பார்க்க இயக்கவும் .
சாஸ்
பூட்ஸ்டார்ப் v4 எங்கள் Sass மூலக் கோப்புகளை CSS கோப்புகளில் தொகுக்க Node Sass ஐப் பயன்படுத்துகிறது (எங்கள் உருவாக்கச் செயல்பாட்டில் சேர்க்கப்பட்டுள்ளது). உங்கள் சொந்த சொத்து பைப்லைனைப் பயன்படுத்தி Sass ஐ தொகுக்கும்போது அதே உருவாக்கப்படும் CSS உடன் முடிவடைவதற்கு, Node Sass செய்யும் அம்சங்களையாவது ஆதரிக்கும் Sass கம்பைலரை நீங்கள் பயன்படுத்த வேண்டும். அக்டோபர் 26, 2020 நிலவரப்படி, LibSass மற்றும் அதன் மேல் கட்டப்பட்ட தொகுப்புகள்—Node Sass உட்பட— நிறுத்தப்பட்டதால் , இதைக் கவனிக்க வேண்டியது அவசியம் .
உங்களுக்கு புதிய Sass அம்சங்கள் அல்லது புதிய CSS தரநிலைகளுடன் இணக்கத்தன்மை தேவைப்பட்டால், Dart Sass இப்போது Sass இன் முதன்மைச் செயலாக்கம் மற்றும் Node Sass உடன் முழுமையாக இணக்கமான JavaScript API ஐ ஆதரிக்கிறது (Dart Sass இன் GitHub பக்கத்தில் பட்டியலிடப்பட்டுள்ள சில விதிவிலக்குகளுடன் ).
உலாவி ரவுண்டிங்கில் உள்ள சிக்கல்களைத் தடுக்க, Sass ரவுண்டிங் துல்லியத்தை 6 ஆக (இயல்புநிலையாக, Node Sass இல் 5 தான்) அதிகரிக்கிறோம். நீங்கள் Dart Sass ஐப் பயன்படுத்தினால், இது நீங்கள் சரிசெய்ய வேண்டிய ஒன்றாக இருக்காது, ஏனெனில் அந்த கம்பைலர் 10 இன் ரவுண்டிங் துல்லியத்தைப் பயன்படுத்துகிறது மற்றும் செயல்திறன் காரணங்களுக்காக அதை சரிசெய்ய அனுமதிக்காது.
தன்னியக்க முன்னொட்டு
உருவாக்க நேரத்தில் சில CSS பண்புகளில் தானாக விற்பனையாளர் முன்னொட்டுகளைச் சேர்க்க பூட்ஸ்டார்ப் Autoprefixer (எங்கள் உருவாக்க செயல்பாட்டில் சேர்க்கப்பட்டுள்ளது) பயன்படுத்துகிறது. அவ்வாறு செய்வது, v3 இல் காணப்படுவது போன்ற விற்பனையாளர் மிக்ஸின்களின் தேவையை நீக்கும் அதே வேளையில், எங்கள் CSS இன் முக்கிய பகுதிகளை ஒரே நேரத்தில் எழுத அனுமதிப்பதன் மூலம் எங்களுக்கு நேரத்தையும் குறியீட்டையும் சேமிக்கிறது.
எங்களின் GitHub களஞ்சியத்தில் உள்ள தனி கோப்பில் Autoprefixer மூலம் ஆதரிக்கப்படும் உலாவிகளின் பட்டியலை நாங்கள் பராமரிக்கிறோம். விவரங்களுக்கு .browserslistrc ஐப் பார்க்கவும்.
உள்ளூர் ஆவணங்கள்
எங்கள் ஆவணங்களை உள்நாட்டில் இயக்க ஹ்யூகோவின் பயன்பாடு தேவைப்படுகிறது, இது hugo-bin npm தொகுப்பு வழியாக நிறுவப்படும். ஹ்யூகோ என்பது மிகவும் வேகமான மற்றும் மிகவும் நீட்டிக்கக்கூடிய நிலையான தள ஜெனரேட்டராகும், இது எங்களுக்கு வழங்குகிறது: அடிப்படை உள்ளடக்கியது, மார்க் டவுன் அடிப்படையிலான கோப்புகள், டெம்ப்ளேட்டுகள் மற்றும் பல. அதை எப்படி தொடங்குவது என்பது இங்கே:
- அனைத்து சார்புகளையும் நிறுவ மேலே உள்ள கருவி அமைப்பை இயக்கவும் .
- ரூட்
/bootstrap
கோப்பகத்திலிருந்து,npm run docs-serve
கட்டளை வரியில் இயக்கவும். - உங்கள் உலாவியில் திறக்கவும்
http://localhost:9001/
, மற்றும் voilà.
அதன் ஆவணங்களைப் படிப்பதன் மூலம் ஹ்யூகோவைப் பயன்படுத்துவது பற்றி மேலும் அறிக .
பழுது நீக்கும்
சார்புகளை நிறுவுவதில் சிக்கல் ஏற்பட்டால், முந்தைய அனைத்து சார்பு பதிப்புகளையும் (உலகளாவிய மற்றும் உள்ளூர்) நிறுவல் நீக்கவும். பின்னர், மீண்டும் இயக்கவும் npm install
.