قورال ياساش
Bootstrap نىڭ ئۆز ئىچىگە ئالغان npm قوليازمىلىرىنى ئىشلىتىپ ھۆججەتلىرىمىزنى قۇرۇش ، مەنبە كودى تۈزۈش ، سىناقلارنى ئىجرا قىلىش ۋە باشقىلارنى ئىشلىتىشنى ئۆگىنىۋېلىڭ.
قورال تەڭشەش
Bootstrap ئۆزىنىڭ قۇرۇش سىستېمىسى ئۈچۈن npm قوليازمىسىنى ئىشلىتىدۇ. Package.json رامكا بىلەن ئىشلەشنىڭ قۇلايلىق ئۇسۇللىرىنى ئۆز ئىچىگە ئالىدۇ ، بۇلار كود تۈزۈش ، ئىجرا قىلىش سىنىقى ۋە باشقىلار .
قۇرۇش سىستېمىمىزنى ئىشلىتىش ۋە ھۆججەتلىرىمىزنى يەرلىكتە ئىجرا قىلىش ئۈچۈن ، Bootstrap نىڭ ئەسلى ھۆججىتى ۋە Node نىڭ كۆپەيتىلگەن نۇسخىسىغا ئېھتىياجلىق بولىسىز. بۇ باسقۇچلارغا ئەگىشىڭ ، تەۋرىنىشكە تەييارلىق قىلىشىڭىز كېرەك:
- بېقىنىشچانلىقىمىزنى باشقۇرۇش ئۈچۈن ئىشلىتىدىغان Node.js نى چۈشۈرۈپ قاچىلاڭ .
- Bootstrap نىڭ مەنبەسىنى چۈشۈرۈڭ ياكى Bootstrap نىڭ ئامبىرىنى تاللاڭ .
- يىلتىز
/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 قوليازمىلىرىنى كۆرۈش ئۈچۈن يۈگۈرۈڭ .
Sass
Bootstrap v4 بىزنىڭ Sass مەنبە ھۆججىتىمىزنى CSS ھۆججىتىگە قۇرۇش ئۈچۈن Node Sass نى ئىشلىتىدۇ (بىزنىڭ قۇرۇلۇش جەريانىمىزغا كىرىدۇ). ئۆزىڭىزنىڭ مۈلۈك تۇرۇبا يولى ئارقىلىق Sass نى تۈزگەندە ئوخشاش ھاسىل قىلىنغان CSS غا خاتىمە بېرىش ئۈچۈن ، ھېچ بولمىغاندا Node Sass قىلىدىغان ئىقتىدارلارنى قوللايدىغان Sass تۈزگۈچىنى ئىشلىتىشىڭىز كېرەك. دىققەت قىلىشقا تېگىشلىكى شۇكى ، 2020-يىلى 26-ئۆكتەبىردىن باشلاپ ، LibSass ۋە ئۇنىڭ ئۈستىگە ياسالغان ئورالمىلار ، يەنى Node Sass نى ئۆز ئىچىگە ئالىدۇ .
ئەگەر سىز تېخىمۇ يېڭى Sass ئىقتىدارلىرى ياكى يېڭى CSS ئۆلچىمىگە ماسلىشىشنى تەلەپ قىلسىڭىز ، Dart Sass ھازىر Sass نىڭ دەسلەپكى يولغا قويۇلۇشى بولۇپ ، Node Sass بىلەن تولۇق ماس كېلىدىغان JavaScript API نى قوللايدۇ (Dart Sass نىڭ GitHub بېتىدە كۆرسىتىلگەن بىر قانچە ئەھۋال بۇنىڭ سىرتىدا ).
توركۆرگۈ يۇمىلاق ئۈستەل مەسىلىسىنىڭ ئالدىنى ئېلىش ئۈچۈن Sass يۇمىلاق توغرىلىق دەرىجىسىنى 6 گە ئۆستۈرىمىز (سۈكۈتتىكى ھالەتتە ، ئۇ Node Sass دا 5). ئەگەر سىز Dart Sass نى ئىشلەتسىڭىز ، بۇ سىز تەڭشەشكە تېگىشلىك ئىش ئەمەس ، چۈنكى ئۇ تۈزگۈچى 10 يۇمىلاق توغرىلىق ئىشلىتىدۇ ، ئۈنۈم سەۋەبىدىن ئۇنى تەڭشەشكە يول قويمايدۇ.
Autoprefixer
Bootstrap Autoprefixer نى ئىشلىتىدۇ (بىزنىڭ ياساش جەريانىمىزغا كىرىدۇ) قۇرۇلۇش ۋاقتىدا بەزى CSS خۇسۇسىيەتلىرىگە ساتقۇچىلارنىڭ ئالدى قوشۇلغۇچىسىنى ئاپتوماتىك قوشىدۇ. بۇنداق قىلىش بىزگە v3 دىكىگە ئوخشاش ساتقۇچىلار ئارىلاشمىسىنىڭ ئېھتىياجىنى يوقىتىش بىلەن بىر ۋاقىتتا ، CSS نىڭ مۇھىم قىسىملىرىنى بىرلا قېتىم يېزىشىمىزغا يول قويۇپ ، ۋاقىت ۋە كودنى تېجەيدۇ.
Autoprefixer ئارقىلىق قوللايدىغان توركۆرگۈچلەرنىڭ تىزىملىكىنى GitHub ئامبىرىمىز ئىچىدىكى ئايرىم ھۆججەتتە ساقلايمىز. تەپسىلاتىنى .browserslistrc دىن كۆرۈڭ.
يەرلىك ھۆججەتلەر
ھۆججەتلىرىمىزنى يەرلىكتە ئىجرا قىلىش Hugo -bin npm بولىقى ئارقىلىق قاچىلانغان Hugo نى ئىشلىتىشنى تەلەپ قىلىدۇ . Hugo كىشىنى ھەيران قالدۇرىدىغان تېز ۋە بىر قەدەر كېڭەيتكىلى بولىدىغان تۇراقلىق تور بېكەت گېنېراتورى بولۇپ ، ئۇ بىزنى تەمىنلەيدۇ: ئاساسى ، Markdown نى ئاساس قىلغان ھۆججەتلەر ، قېلىپلار ۋە باشقىلار. ئۇنى قانداق باشلاش كېرەك:
- بارلىق تايىنىشچانلىقىنى ئورنىتىش ئۈچۈن ئۈستىدىكى قورال تەڭشەش ئارقىلىق ئىجرا قىلىڭ .
- يىلتىز
/bootstrap
مۇندەرىجىسىدىنnpm run docs-serve
بۇيرۇق قۇرىدا ئىجرا قىلىڭ. http://localhost:9001/
تور كۆرگۈچىڭىزدە ئېچىڭ .
ئۇنىڭ ھۆججەتلىرىنى ئوقۇش ئارقىلىق Hugo نى ئىشلىتىش ھەققىدىكى تەپسىلاتلار .
كاشىلا
بېقىنىش ئورنىتىش مەسىلىسىگە يولۇقسىڭىز ، ئىلگىرىكى بېقىنىش نەشىرىنى (يەرشارى ۋە يەرلىك) ئۆچۈرۈڭ. ئاندىن قايتا قوزغىتىڭ npm install
.