મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

સાધનો બનાવો

અમારા દસ્તાવેજો બનાવવા, સ્રોત કોડ કમ્પાઇલ કરવા, પરીક્ષણો ચલાવવા અને વધુ માટે બુટસ્ટ્રેપની સમાવિષ્ટ npm સ્ક્રિપ્ટ્સનો ઉપયોગ કેવી રીતે કરવો તે જાણો.

આ પૃષ્ઠ પર

ટૂલિંગ સેટઅપ

બુટસ્ટ્રેપ તેની બિલ્ડ સિસ્ટમ માટે npm સ્ક્રિપ્ટનો ઉપયોગ કરે છે. અમારું package.json ફ્રેમવર્ક સાથે કામ કરવા માટેની અનુકૂળ પદ્ધતિઓનો સમાવેશ કરે છે, જેમાં કોડ કમ્પાઇલિંગ, ટેસ્ટ ચલાવવા અને વધુનો સમાવેશ થાય છે.

અમારી બિલ્ડ સિસ્ટમનો ઉપયોગ કરવા અને અમારા દસ્તાવેજીકરણને સ્થાનિક રીતે ચલાવવા માટે, તમારે બુટસ્ટ્રેપની સ્રોત ફાઇલો અને નોડની નકલની જરૂર પડશે. આ પગલાં અનુસરો અને તમારે રોક કરવા માટે તૈયાર થવું જોઈએ:

  1. Node.js ડાઉનલોડ કરો અને ઇન્સ્ટોલ કરો , જેનો ઉપયોગ અમે અમારી નિર્ભરતાને સંચાલિત કરવા માટે કરીએ છીએ.
  2. ક્યાં તો બુટસ્ટ્રેપના સ્ત્રોતો ડાઉનલોડ કરો અથવા બુટસ્ટ્રેપના રીપોઝીટરીને ફોર્ક કરો .
  3. રુટ /bootstrapડિરેક્ટરીમાં નેવિગેટ કરો અને પેકેજnpm install .json માં સૂચિબદ્ધ અમારી સ્થાનિક નિર્ભરતાને ઇન્સ્ટોલ કરવા માટે ચલાવો .

જ્યારે પૂર્ણ થઈ જાય, ત્યારે તમે કમાન્ડ લાઇનમાંથી પૂરા પાડવામાં આવેલ વિવિધ આદેશોને ચલાવવા માટે સમર્થ હશો.

npm સ્ક્રિપ્ટનો ઉપયોગ

અમારા package.json માં પ્રોજેક્ટ વિકસાવવા માટે અસંખ્ય કાર્યોનો સમાવેશ થાય છે. npm runતમારા ટર્મિનલમાં તમામ npm સ્ક્રિપ્ટ જોવા માટે દોડો . પ્રાથમિક કાર્યોમાં શામેલ છે:

કાર્ય વર્ણન
npm start CSS અને JavaScript કમ્પાઇલ કરે છે, દસ્તાવેજીકરણ બનાવે છે અને સ્થાનિક સર્વર શરૂ કરે છે.
npm run dist dist/સંકલિત ફાઇલો સાથે ડિરેક્ટરી બનાવે છે . Sass , Autoprefixer , અને terser ની જરૂર છે .
npm test દોડ્યા પછી સ્થાનિક સ્તરે પરીક્ષણો ચલાવે છેnpm run dist
npm run docs-serve સ્થાનિક રીતે દસ્તાવેજીકરણ બનાવે છે અને ચલાવે છે.
અમારા સ્ટાર્ટર પ્રોજેક્ટ સાથે npm દ્વારા બુટસ્ટ્રેપ સાથે પ્રારંભ કરો! તમારા પોતાના npm પ્રોજેક્ટમાં બુટસ્ટ્રેપને કેવી રીતે બનાવવું અને કસ્ટમાઇઝ કરવું તે જોવા માટે twbs/bootstrap-npm-starter ટેમ્પલેટ રીપોઝીટરી પર જાઓ. Sass કમ્પાઇલર, ઑટોપ્રીફિક્સર, સ્ટાઇલિન્ટ, PurgeCSS અને બુટસ્ટ્રેપ આઇકન્સનો સમાવેશ થાય છે.

સસ

બુટસ્ટ્રેપ અમારી Sass સ્ત્રોત ફાઇલોને CSS ફાઇલોમાં કમ્પાઇલ કરવા માટે Dart Sass નો ઉપયોગ કરે છે (અમારી બિલ્ડ પ્રક્રિયામાં સમાવિષ્ટ છે), અને અમે ભલામણ કરીએ છીએ કે જો તમે તમારી પોતાની એસેટ પાઇપલાઇનનો ઉપયોગ કરીને Sass કમ્પાઇલ કરી રહ્યાં હોવ તો તમે પણ તે જ કરો. અમે અગાઉ બુટસ્ટ્રેપ v4 માટે નોડ સાસનો ઉપયોગ કર્યો હતો, પરંતુ LibSass અને તેની ઉપર બનેલા પેકેજો, જેમાં નોડ સાસનો સમાવેશ થાય છે, હવે નાપસંદ કરવામાં આવ્યો છે .

ડાર્ટ સાસ 10 ની ગોળાકાર ચોકસાઇનો ઉપયોગ કરે છે અને કાર્યક્ષમતાના કારણોસર આ મૂલ્યને ગોઠવવાની મંજૂરી આપતું નથી. અમે અમારા જનરેટ કરેલ CSS ની આગળની પ્રક્રિયા દરમિયાન આ ચોકસાઇને ઓછી કરતા નથી, જેમ કે મિનિફિકેશન દરમિયાન, પરંતુ જો તમે તેમ કરવાનું પસંદ કર્યું હોય તો અમે બ્રાઉઝર રાઉન્ડિંગમાં સમસ્યાઓને રોકવા માટે ઓછામાં ઓછી 6 ની ચોકસાઇ જાળવવાની ભલામણ કરીએ છીએ.

ઓટોપ્રીફિક્સર

બુટસ્ટ્રેપ બિલ્ડ સમયે કેટલીક CSS પ્રોપર્ટીઝમાં વિક્રેતા ઉપસર્ગને આપમેળે ઉમેરવા માટે ઑટોપ્રીફિક્સર (અમારી બિલ્ડ પ્રક્રિયામાં શામેલ) નો ઉપયોગ કરે છે. આમ કરવાથી v3 માં જોવા મળતા વિક્રેતા મિશ્રણોની જરૂરિયાતને દૂર કરતી વખતે અમને અમારા CSS ના મુખ્ય ભાગોને એક જ વાર લખવાની મંજૂરી આપીને સમય અને કોડની બચત થાય છે.

અમે અમારી GitHub રિપોઝીટરીમાં એક અલગ ફાઇલમાં ઑટોપ્રીફિક્સર દ્વારા સમર્થિત બ્રાઉઝર્સની સૂચિ જાળવીએ છીએ. વિગતો માટે .browserslistrc જુઓ .

RTLCSS

બુટસ્ટ્રેપ સંકલિત CSS પર પ્રક્રિયા કરવા માટે RTLCSS નો ઉપયોગ કરે છે અને તેમને RTL માં રૂપાંતરિત કરે છે - મૂળભૂત રીતે આડી દિશા જાગૃત ગુણધર્મો (દા.ત. padding-left) ને તેમની વિરુદ્ધ સાથે બદલીને. તે અમને ફક્ત એક જ વાર અમારી CSS લખવા અને RTLCSS નિયંત્રણ અને મૂલ્ય નિર્દેશોનો ઉપયોગ કરીને નાના ફેરફારો કરવાની મંજૂરી આપે છે.

સ્થાનિક દસ્તાવેજીકરણ

અમારા દસ્તાવેજીકરણને સ્થાનિક રીતે ચલાવવા માટે હ્યુગોનો ઉપયોગ કરવો જરૂરી છે, જે હ્યુગો-બિન એનપીએમ પેકેજ દ્વારા ઇન્સ્ટોલ થાય છે. હ્યુગો એ ખૂબ જ ઝડપી અને તદ્દન એક્સ્ટેન્સિબલ સ્ટેટિક સાઇટ જનરેટર છે જે અમને પ્રદાન કરે છે: મૂળભૂત સમાવેશ, માર્કડાઉન-આધારિત ફાઇલો, ટેમ્પ્લેટ્સ અને વધુ. તેને કેવી રીતે શરૂ કરવું તે અહીં છે:

  1. બધી નિર્ભરતાને ઇન્સ્ટોલ કરવા માટે ઉપરના ટૂલિંગ સેટઅપ દ્વારા ચલાવો .
  2. રૂટ /bootstrapડિરેક્ટરીમાંથી, npm run docs-serveઆદેશ વાક્યમાં ચલાવો.
  3. તમારા બ્રાઉઝરમાં ખોલો http://localhost:9001/અને વોઈલા.

તેના દસ્તાવેજો વાંચીને હ્યુગોનો ઉપયોગ કરવા વિશે વધુ જાણો .

મુશ્કેલીનિવારણ

જો તમને ડિપેન્ડન્સી ઇન્સ્ટોલ કરવામાં સમસ્યા આવે, તો પહેલાના તમામ ડિપેન્ડન્સી વર્ઝન (વૈશ્વિક અને સ્થાનિક)ને અનઇન્સ્ટોલ કરો. પછી, ફરીથી ચલાવો npm install.