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