in English

સાધનો બનાવો

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

ટૂલિંગ સેટઅપ

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

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

  1. Node.js ડાઉનલોડ કરો અને ઇન્સ્ટોલ કરો , જેનો ઉપયોગ અમે અમારી નિર્ભરતાને સંચાલિત કરવા માટે કરીએ છીએ.
  2. ક્યાં તો બુટસ્ટ્રેપના સ્ત્રોતો ડાઉનલોડ કરો અથવા બુટસ્ટ્રેપના રીપોઝીટરીને ફોર્ક કરો .
  3. રુટ /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 સ્ક્રિપ્ટ જોવા માટે ચલાવો .

અમારા સ્ટાર્ટર પ્રોજેક્ટ સાથે npm દ્વારા બુટસ્ટ્રેપ સાથે પ્રારંભ કરો! તમારા પોતાના npm પ્રોજેક્ટમાં બુટસ્ટ્રેપને કેવી રીતે બનાવવું અને કસ્ટમાઇઝ કરવું તે જોવા માટે twbs/bootstrap-npm-starter ટેમ્પલેટ રીપોઝીટરી પર જાઓ. Sass કમ્પાઇલર, ઑટોપ્રીફિક્સર, સ્ટાઇલિન્ટ, PurgeCSS અને બુટસ્ટ્રેપ આઇકન્સનો સમાવેશ થાય છે.

સસ

બુટસ્ટ્રેપ v4 અમારી Sass સ્રોત ફાઇલોને CSS ફાઇલોમાં કમ્પાઇલ કરવા માટે નોડ Sass નો ઉપયોગ કરે છે (અમારી બિલ્ડ પ્રક્રિયામાં શામેલ છે). તમારી પોતાની એસેટ પાઇપલાઇનનો ઉપયોગ કરીને Sassને કમ્પાઇલ કરતી વખતે સમાન જનરેટ કરેલ CSS સાથે સમાપ્ત થવા માટે, તમારે Sass કમ્પાઇલરનો ઉપયોગ કરવાની જરૂર પડશે જે ઓછામાં ઓછા નોડ સાસ કરે છે તેવી સુવિધાઓને સપોર્ટ કરે છે. આ નોંધવું અગત્યનું છે કારણ કે ઑક્ટોબર 26, 2020 સુધી, LibSass અને તેની ઉપર બનેલા પેકેજો—નોડ Sass સહિત— નાપસંદ કરવામાં આવ્યા છે .

જો તમને નવી Sass સુવિધાઓ અથવા નવા CSS ધોરણો સાથે સુસંગતતાની જરૂર હોય, તો Dart Sass હવે Sass નું પ્રાથમિક અમલીકરણ છે અને JavaScript API ને સપોર્ટ કરે છે જે Node Sass સાથે સંપૂર્ણ રીતે સુસંગત છે (Dart Sass ના GitHub પૃષ્ઠ પર સૂચિબદ્ધ કેટલાક અપવાદો સાથે ).

બ્રાઉઝર રાઉન્ડિંગની સમસ્યાઓને રોકવા માટે અમે Sass રાઉન્ડિંગની ચોકસાઈને 6 સુધી વધારીએ છીએ (ડિફૉલ્ટ રૂપે, તે નોડ સાસમાં 5 છે). જો તમે ડાર્ટ સાસનો ઉપયોગ કરો છો, તો આ તમારે સમાયોજિત કરવાની જરૂર નથી, કારણ કે તે કમ્પાઇલર 10 ની રાઉન્ડિંગ ચોકસાઇનો ઉપયોગ કરે છે અને કાર્યક્ષમતાના કારણોસર તેને સમાયોજિત કરવાની મંજૂરી આપતું નથી.

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

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

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

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

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

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

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

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

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