in English

መሣሪያዎችን ይገንቡ

የእኛን ሰነድ ለመገንባት፣ የምንጭ ኮድ ለማጠናቀር፣ ሙከራዎችን ለማስኬድ እና ሌሎችንም ለመስራት የ Bootstrapን የተካተቱ npm ስክሪፕቶችን እንዴት መጠቀም እንዳለብን ይወቁ።

የመሳሪያ ዝግጅት

Bootstrap ለግንባታ ስርዓቱ የ npm ስክሪፕቶችን ይጠቀማል ። የኛ ፓኬጅ. json ከማዕቀፉ ጋር ለመስራት ምቹ ዘዴዎችን ያካትታል ኮድ ማጠናቀር፣ ሙከራዎችን ማስኬድ እና ሌሎችንም ያካትታል።

የግንባታ ስርዓታችንን ለመጠቀም እና ሰነዶቻችንን በአገር ውስጥ ለማስኬድ የBootstrap የምንጭ ፋይሎች እና መስቀለኛ መንገድ ቅጂ ያስፈልግዎታል። እነዚህን ቅደም ተከተሎች ይከተሉ እና ለመወዝወዝ ዝግጁ መሆን አለብዎት:

  1. የእኛን ጥገኝነቶች ለማስተዳደር የምንጠቀመው Node.js ያውርዱ እና ይጫኑ ።
  2. የ Bootstrapን ምንጮች ያውርዱ ወይም ሹካ የ Bootstrap ማከማቻ .
  3. ወደ ስርወ /bootstrapማውጫው ይሂዱ እና በጥቅልnpm install ውስጥ የተዘረዘሩትን የአካባቢያችንን ጥገኞች ለመጫን ያሂዱ ።

ሲጨርሱ ከትዕዛዝ መስመሩ የተሰጡ የተለያዩ ትዕዛዞችን ማስኬድ ይችላሉ።

npm ስክሪፕቶችን በመጠቀም

Our package.json የሚከተሉትን ትዕዛዞች እና ተግባሮች ያካትታል:

ተግባር መግለጫ
npm run dist npm run dist/dist/ማውጫውን ከተሰበሰቡ ፋይሎች ጋር ይፈጥራል ። Sass ፣ Autoprefixer እና terser ይጠቀማል ።
npm test ከሩጫ በኋላ ሙከራዎችን በአገር ውስጥ ያካሂዳልnpm run dist
npm run docs-serve ሰነዶቹን በአገር ውስጥ ይገነባል እና ያስኬዳል።

npm runሁሉንም npm ስክሪፕቶች ለማየት ሩጡ ።

በጀማሪ ፕሮጄክታችን በ npm በኩል በ Bootstrap ይጀምሩ! Bootstrapን በራስዎ npm ፕሮጀክት እንዴት መገንባት እና ማበጀት እንደሚችሉ ለማየት ወደ twbs /bootstrap-npm-starter አብነት ማከማቻ ይሂዱ። Sass compiler፣ Autoprefixer፣ Stylelint፣ PurgeCSS እና Bootstrap አዶዎችን ያካትታል።

ሳስ

Bootstrap v4 የ Sass ምንጭ ፋይሎቻችንን ወደ ሲኤስኤስ ፋይሎች (በግንባታ ሂደታችን ውስጥ የተካተተ) ለመሰብሰብ Node Sass ይጠቀማል። የራስዎን የንብረት ቧንቧ መስመር ተጠቅመው Sass ን ሲያጠናቅቁ በተመሳሳዩ CSS ለመጨረስ፣ ኖድ ሳስ የሚያደርገውን ቢያንስ ባህሪያት የሚደግፍ Sass compiler መጠቀም ያስፈልግዎታል። ይህ ትኩረት ሊሰጠው የሚገባ ጉዳይ ነው ምክንያቱም ከኦክቶበር 26፣ 2020 ጀምሮ ሊብሳስ እና በላዩ ላይ የተገነቡ ጥቅሎች - ኖድ ሳስን ጨምሮ - ተቋርጠዋል ።

አዳዲስ የ Sass ባህሪያትን ወይም ከአዳዲስ የሲኤስኤስ መመዘኛዎች ጋር ተኳሃኝነት ከፈለጉ፣ Dart Sass አሁን የ Sass ዋና ትግበራ ነው እና ከኖድ ሳስ ጋር ሙሉ ለሙሉ ተኳሃኝ የሆነ ጃቫስክሪፕት ኤፒአይን ይደግፋል (ከጥቂት በስተቀር በዳርት ሳስ ጂትሃብ ገጽ ላይ ከተዘረዘሩት በስተቀር )።

የአሳሽ ማጠጋጋት ችግሮችን ለመከላከል የ Sass ዙር ትክክለኛነትን ወደ 6 (በነባሪ፣ በኖድ ሳስ 5 ነው) እናሳድገዋለን። Dart Sass ከተጠቀሙ ይህ ማስተካከል ያለብዎት ነገር አይሆንም፣ ምክንያቱም ማቀናበሪያው የ 10 ዙር ትክክለኛነትን ስለሚጠቀም እና በውጤታማነት ምክንያቶች እንዲስተካከል አይፈቅድም።

ራስ-ቅጥያ

ቡትስትራፕ በግንባታ ጊዜ ለአንዳንድ የሲኤስኤስ ንብረቶች የአቅራቢ ቅድመ ቅጥያዎችን በራስ ሰር ቅድመ ቅጥያ (በእኛ የግንባታ ሂደት ውስጥ የተካተተ) ይጠቀማል። ይህን ማድረጋችን የ CSSችንን ቁልፍ ክፍሎች በአንድ ጊዜ እንድንጽፍ በመፍቀድ ጊዜን እና ኮድን ይቆጥባል እንዲሁም በ v3 ላይ የሚገኙትን የአቅራቢዎች ድብልቅን አስፈላጊነት በማስወገድ።

በAutoprefixer በኩል የሚደገፉትን የአሳሾች ዝርዝር በ GitHub ማከማቻችን ውስጥ በተለየ ፋይል ውስጥ እናስቀምጣለን። ለዝርዝሮች .browserslistrc ን ይመልከቱ።

የአካባቢ ሰነዶች

ሰነዶቻችንን በአገር ውስጥ ማስኬድ በ hugo-bin npm ጥቅል በኩል የሚጫነውን ሁጎን መጠቀም ይጠይቃል ። ሁጎ በጣም ፈጣን እና ሊሰፋ የሚችል የማይንቀሳቀስ ጣቢያ ጀነሬተር ነው፡ የሚሰጠን፡ መሰረታዊ የሚያጠቃልለው፣ Markdown ላይ የተመሰረቱ ፋይሎች፣ አብነቶች እና ሌሎችም። እንዴት እንደሚጀመር እነሆ፡-

  1. ሁሉንም ጥገኞች ለመጫን ከላይ ባለው የመሳሪያ ዝግጅት ያሂዱ ።
  2. ከስር /bootstrapማውጫው, npm run docs-serveበትእዛዝ መስመር ውስጥ ያሂዱ.
  3. http://localhost:9001/በአሳሽዎ ውስጥ ይክፈቱ እና voilà።

ሰነዶቹን በማንበብ ስለ ሁጎ አጠቃቀም የበለጠ ይረዱ ።

ችግርመፍቻ

ጥገኞችን በመጫን ላይ ችግሮች ካጋጠሙዎት ሁሉንም የቀድሞ የጥገኝነት ስሪቶች (ዓለም አቀፍ እና አካባቢያዊ) ያራግፉ። ከዚያ እንደገና ያሂዱ npm install።