ಉಪಕರಣಗಳನ್ನು ನಿರ್ಮಿಸಿ
ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ನಿರ್ಮಿಸಲು, ಮೂಲ ಕೋಡ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು, ಪರೀಕ್ಷೆಗಳನ್ನು ಚಲಾಯಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಒಳಗೊಂಡಿರುವ npm ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.
ಟೂಲಿಂಗ್ ಸೆಟಪ್
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ತನ್ನ ನಿರ್ಮಾಣ ವ್ಯವಸ್ಥೆಗಾಗಿ npm ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಕೋಡ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುವುದು, ಚಾಲನೆಯಲ್ಲಿರುವ ಪರೀಕ್ಷೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ನಮ್ಮ ಪ್ಯಾಕೇಜ್ .json ಅನುಕೂಲಕರ ವಿಧಾನಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
ನಮ್ಮ ಬಿಲ್ಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸಲು ಮತ್ತು ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಚಲಾಯಿಸಲು, ನಿಮಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಫೈಲ್‌ಗಳು ಮತ್ತು ನೋಡ್‌ನ ನಕಲು ಅಗತ್ಯವಿದೆ. ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ ಮತ್ತು ನೀವು ರಾಕ್ ಮಾಡಲು ಸಿದ್ಧರಾಗಿರಬೇಕು:
- ನಮ್ಮ ಅವಲಂಬನೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಾವು ಬಳಸುವ Node.js ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಸ್ಥಾಪಿಸಿ .
- ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಅಥವಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ರೆಪೊಸಿಟರಿಯನ್ನು ಫೋರ್ಕ್ ಮಾಡಿ .
/bootstrapಮೂಲ ಡೈರೆಕ್ಟರಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ ಮತ್ತು ಪ್ಯಾಕೇಜ್npm install.json ನಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ನಮ್ಮ ಸ್ಥಳೀಯ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ರನ್ ಮಾಡಿ .
ಪೂರ್ಣಗೊಂಡಾಗ, ಆಜ್ಞಾ ಸಾಲಿನಿಂದ ಒದಗಿಸಲಾದ ವಿವಿಧ ಆಜ್ಞೆಗಳನ್ನು ನೀವು ಚಲಾಯಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
npm ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಬಳಸುವುದು
ನಮ್ಮ package.json ಯೋಜನೆಯನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಹಲವಾರು ಕಾರ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. npm runನಿಮ್ಮ ಟರ್ಮಿನಲ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ npm ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ನೋಡಲು ರನ್ ಮಾಡಿ. ಪ್ರಾಥಮಿಕ ಕಾರ್ಯಗಳು ಸೇರಿವೆ:
| ಕಾರ್ಯ | ವಿವರಣೆ |
|---|---|
npm start |
CSS ಮತ್ತು JavaScript ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ, ದಸ್ತಾವೇಜನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಥಳೀಯ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. |
npm run dist |
dist/ಕಂಪೈಲ್ ಮಾಡಿದ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ಡೈರೆಕ್ಟರಿಯನ್ನು ರಚಿಸುತ್ತದೆ . ಸಾಸ್ , ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಮತ್ತು ಟರ್ಸರ್ ಅಗತ್ಯವಿದೆ . |
npm test |
ಓಡಿದ ನಂತರ ಸ್ಥಳೀಯವಾಗಿ ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸುತ್ತದೆnpm run dist |
npm run docs-serve |
ಸ್ಥಳೀಯವಾಗಿ ದಸ್ತಾವೇಜನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ ಮತ್ತು ರನ್ ಮಾಡುತ್ತದೆ. |
ಸಾಸ್
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಮ್ಮ Sass ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು CSS ಫೈಲ್‌ಗಳಾಗಿ ಕಂಪೈಲ್ ಮಾಡಲು Dart Sass ಅನ್ನು ಬಳಸುತ್ತದೆ (ನಮ್ಮ ನಿರ್ಮಾಣ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ), ಮತ್ತು ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಆಸ್ತಿ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು Sass ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತಿದ್ದರೆ ಅದೇ ರೀತಿ ಮಾಡಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ನಾವು ಹಿಂದೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ಗಾಗಿ Node Sass ಅನ್ನು ಬಳಸಿದ್ದೇವೆ, ಆದರೆ LibSass ಮತ್ತು Node Sass ಸೇರಿದಂತೆ ಅದರ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಈಗ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ .
ಡಾರ್ಟ್ ಸಾಸ್ 10 ರ ಪೂರ್ಣಾಂಕದ ನಿಖರತೆಯನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ದಕ್ಷತೆಯ ಕಾರಣಗಳಿಗಾಗಿ ಈ ಮೌಲ್ಯದ ಹೊಂದಾಣಿಕೆಯನ್ನು ಅನುಮತಿಸುವುದಿಲ್ಲ. ನಮ್ಮ ರಚಿತವಾದ CSS ನ ಮುಂದಿನ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ನಾವು ಈ ನಿಖರತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದಿಲ್ಲ, ಉದಾಹರಣೆಗೆ ಮಿನಿಫಿಕೇಶನ್ ಸಮಯದಲ್ಲಿ, ಆದರೆ ನೀವು ಹಾಗೆ ಮಾಡಲು ಆಯ್ಕೆ ಮಾಡಿದರೆ ಬ್ರೌಸರ್ ಪೂರ್ಣಾಂಕದಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಕನಿಷ್ಠ 6 ನಿಖರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ.
ಆಟೋಪ್ರಿಫಿಕ್ಸರ್
ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಕೆಲವು CSS ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಸೇರಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಅನ್ನು (ನಮ್ಮ ನಿರ್ಮಾಣ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ) ಬಳಸುತ್ತದೆ. ಹಾಗೆ ಮಾಡುವುದರಿಂದ ನಮ್ಮ CSS ನ ಪ್ರಮುಖ ಭಾಗಗಳನ್ನು ಒಂದೇ ಬಾರಿ ಬರೆಯಲು ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ನಮಗೆ ಸಮಯ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು v3 ನಲ್ಲಿ ಕಂಡುಬರುವಂತಹ ವೆಂಡರ್ ಮಿಕ್ಸಿನ್‌ಗಳ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ನಮ್ಮ GitHub ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಮೂಲಕ ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ನಾವು ನಿರ್ವಹಿಸುತ್ತೇವೆ. ವಿವರಗಳಿಗಾಗಿ .browserslistrc ಅನ್ನು ನೋಡಿ.
RTLCSS
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು RTLCSS ಅನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು RTL ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ - ಮೂಲತಃ ಸಮತಲ ದಿಕ್ಕಿನ ಅರಿವು ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಉದಾ. padding-left) ಅವುಗಳ ವಿರುದ್ಧವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ನಮ್ಮ CSS ಅನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಬರೆಯಲು ಮತ್ತು RTLCSS ನಿಯಂತ್ರಣ ಮತ್ತು ಮೌಲ್ಯ ನಿರ್ದೇಶನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಣ್ಣ ಟ್ವೀಕ್‌ಗಳನ್ನು ಮಾಡಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಸ್ಥಳೀಯ ದಾಖಲಾತಿ
ನಮ್ಮ ದಸ್ತಾವೇಜನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಚಲಾಯಿಸಲು ಹ್ಯೂಗೋ ಬಳಕೆಯ ಅಗತ್ಯವಿದೆ, ಇದು hugo-bin npm ಪ್ಯಾಕೇಜ್ ಮೂಲಕ ಸ್ಥಾಪಿಸಲ್ಪಡುತ್ತದೆ. ಹ್ಯೂಗೋ ನಮಗೆ ಒದಗಿಸುವ ಪ್ರಜ್ವಲಿಸುವ ವೇಗದ ಮತ್ತು ಸಾಕಷ್ಟು ವಿಸ್ತರಿಸಬಹುದಾದ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್ ಆಗಿದೆ: ಮೂಲಭೂತ ಒಳಗೊಂಡಿದೆ, ಮಾರ್ಕ್‌ಡೌನ್-ಆಧಾರಿತ ಫೈಲ್‌ಗಳು, ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವು. ಇದನ್ನು ಹೇಗೆ ಪ್ರಾರಂಭಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ಎಲ್ಲಾ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ಮೇಲಿನ ಟೂಲಿಂಗ್ ಸೆಟಪ್ ಮೂಲಕ ರನ್ ಮಾಡಿ.
- ಮೂಲ
/bootstrapಡೈರೆಕ್ಟರಿಯಿಂದ,npm run docs-serveಆಜ್ಞಾ ಸಾಲಿನಲ್ಲಿ ರನ್ ಮಾಡಿ. - ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ
http://localhost:9001/ಮತ್ತು voilà.
ಅದರ ದಸ್ತಾವೇಜನ್ನು ಓದುವ ಮೂಲಕ ಹ್ಯೂಗೋವನ್ನು ಬಳಸುವ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .
ದೋಷನಿವಾರಣೆ
ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸುವಲ್ಲಿ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಿದರೆ, ಹಿಂದಿನ ಎಲ್ಲಾ ಅವಲಂಬನೆ ಆವೃತ್ತಿಗಳನ್ನು (ಜಾಗತಿಕ ಮತ್ತು ಸ್ಥಳೀಯ) ಅಸ್ಥಾಪಿಸಿ. ನಂತರ, ಮರುಚಾಲನೆ ಮಾಡಿ npm install.