in English

መሳርሒታት ምህናጽ

ሰነዳትና ንምህናጽ፡ ምንጪ ኮድ ንምጥርናፍ፡ ፈተነታት ንምክያድን ካልእን ብኸመይ ኣብ Bootstrap ዝተሓወሱ npm ስክሪፕትታት ከም እንጥቀም ንመሃር።

ምድላው መሳርሒታት

ቡትስትራፕ ንህንጻ ስርዓቱ npm ስክሪፕት ይጥቀም። package.json ናትና ምስቲ ፍሬምዎርክ ንምስራሕ ምቹኣት ሜላታት ዘጠቓልል ኮይኑ፡ ኮድ ምጥርናፍ፡ ፈተነታት ምክያድን ካልእን ይርከብዎም።

ናትና build system ንምጥቃምን ሰነዳትና ኣብ ውሽጢ ዓዲ ንምስራሕን፡ ቅዳሕ ናይ Bootstrap ምንጪ ፋይላትን Nodeን ከድልየኩም እዩ። ነዞም ዝስዕቡ ስጉምትታት ተኸተል እሞ ንኽትናወጽ ድሉው ክትከውን ኣለካ፤

  1. ጽግዕተኛታትና ንምምሕዳር እንጥቀመሉ Node.js ኣውሪድና ንጽዓኖ ።
  2. ወይ ምንጪታት ቡትስትራፕ ኣውርድ ወይ ድማ መኽዘን ቡትስትራፕ ፎርክ ግበር ።
  3. ናብቲ ሱር /bootstrapማህደር ብምኻድ ኣብ package.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 npm runስክሪፕት ንምርኣይ ጉየዩ።

ብ Bootstrap ብመንገዲ npm ምስ ጀማሪ ፕሮጀክትና ጀምር! ኣብ ናይ ገዛእ ርእስኻ npm ፕሮጀክት ከመይ ጌርካ Bootstrap ትሃንጽን ትመዓራረን ንምርኣይ ናብ twbs/bootstrap-npm-starter template repository ኣቕንዕ። Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ከምኡውን Bootstrap Icons ዘጠቓልል እዩ።

ሳስ

Bootstrap v4 ንናይ Sass ምንጪ ፋይላትና ናብ CSS ፋይላት (ኣብ መስርሕ ህንጸትና ዝተሓወሱ) ንምጥርናፍ Node Sass ይጥቀም። ናይ ገዛእ ርእስኻ ንብረት ሻምብቆ ተጠቒምካ Sass ክትጥርንፍ ከለኻ ተመሳሳሊ ዝፍጠር CSS ንኽትውድእ፡ እንተወሓደ ነቶም Node Sass ዝገብሮም ባህርያት ዝድግፍ Sass compiler ክትጥቀም ከድልየካ እዩ። እዚ ምፍላጥ ኣገዳሲ እዩ ምኽንያቱ ካብ 26 ጥቅምቲ 2020 ጀሚሩ፡ LibSassን ኣብ ልዕሊኡ ዝተሃንጹ ፓኬጃትን-ንኖድ ሳስ ሓዊስካ-ተጠቕሞም ስለዘለዉ .

ሓደስቲ ናይ Sass ባህርያት ወይ ምስ ሓደስቲ CSS ደረጃታት ምትእስሳር እንተደሊኻ ፡ Dart Sass ሕጂ ቀንዲ ኣተገባብራ Sass ኮይኑ ምስ Node Sass ምሉእ ብምሉእ ዝሰማማዕ JavaScript API ይድግፍ (ብዘይካ ውሑዳት ኣብ ገጽ GitHub Dart Sass ተዘርዚሮም ኣለዉ )።

ንናይ ሳስ ምኽባብ ትኽክለኛነት ናብ 6 ንውስኾ (ብነባሪ፡ ኣብ ኖድ ሳስ 5 እዩ)፡ ኣብ ምኽባብ መርበብ ሓበሬታ ንዘጋጥም ጸገማት ንምክልኻል። Dart Sass እንተተጠቒምካ እዚ ከተመዓራርዮ ዘድልየካ ነገር ኣይክኸውንን እዩ፣ ምኽንያቱ እቲ ኣከባቢርካ 10 ዝኾነ ናይ ምኽባብ ትኽክለኛነት ይጥቀምን ብብቕዓት ምኽንያት ድማ ንኽስተኻኸል ስለዘየፍቅድን።

ኣውቶፕሪፊክሰር

ቡትስትራፕ ኣብ ግዜ ህንጸት ኣብ ገለ CSS ባህርያት ብኣውቶማቲክ ቅድመ-ጥብቆታት ሸየጥቲ ንምውሳኽ Autoprefixer (ኣብ መስርሕ ህንጸትና ዝተሓወሶ) ይጥቀም። ከምኡ ምግባርና ከምቶም ኣብ v3 ዝርከቡ ናይ ሸየጥቲ ሚክሲናት ኣድላይነት እናኣወገድና ቁልፊ ክፋላት ናይ CSSና ኣብ ሓደ ግዜ ክንጽሕፍ ብምፍቃድ ግዜን ኮድን ይቑጥበልና።

ዝርዝር ናይቶም ብመንገዲ Autoprefixer ዝድገፉ መርበባት ሓበሬታ ኣብ ውሽጢ መኽዘን GitHubና ኣብ ፍሉይ ፋይል ንሕዞ። ንዝርዝር ሓበሬታ .browserslistrc ርአ ።

ናይ ከባቢ ሰነዳት።

ሰነዳትና ኣብ ውሽጢ ዓዲ ንምስራሕ ሁጎ ምጥቃም የድሊ፣ እዚ ድማ ብመንገዲ hugo-bin npm package ይተክል። ሁጎ ንዓና ዝህበና blazingly ቅልጡፍን ምሉእ ብምሉእ ዝዝርጋሕን ስታትቲክ ሳይት ጀነሬተር እዩ: መሰረታዊ ዘጠቓልል, Markdown-based files, templates, and more. ከመይ ጌርካ ከም እትጅምሮ ኣብዚ ኣሎ፤

  1. ኩሎም ጽግዕተኛታት ንምትካል በቲ ኣብ ላዕሊ ዘሎ ናይ መሳርሒታት ኣወዳድባ ምዝዋር ።
  2. ካብቲ ሱር /bootstrapማህደር npm run docs-serveኣብ መስመር ትእዛዝ ንስራሕ።
  3. http://localhost:9001/ኣብ መርበብ ሓበሬታኻ ክፈት ፡ voilà ድማ።

ብዛዕባ ኣጠቓቕማ ሁጎ ዝያዳ ፍለጡ ሰነዳቱ ብምንባብ ።

ምፍታሕ ጸገማት

ኣብ ምትካል ጽግዕተኛታት ጸገማት እንተ ኣጋጢሙካ፡ ንኹሎም ዝሓለፉ ጽግዕተኛታት ስሪት (ዓለማውን ከባብያውን) ኣውጽእዎ። ድሕሪኡ፡ ዳግማይ ምዝዋር npm install.