Szerszámok építése

Tanulja meg, hogyan használhatja a Bootstrap mellékelt npm szkriptjeit dokumentációnk felépítéséhez, forráskód fordításához, tesztek futtatásához és sok máshoz.

Ezen az oldalon

Szerszámozás beállítása

A Bootstrap npm szkripteket használ felépítési rendszeréhez. A package.json fájlunk kényelmes módszereket tartalmaz a keretrendszerrel való munkavégzéshez, beleértve a kódfordítást, a tesztek futtatását és még sok mást.

Összeállítási rendszerünk használatához és dokumentációnk helyi futtatásához szüksége lesz a Bootstrap forrásfájljainak és a Node-nak egy másolatára. Kövesse az alábbi lépéseket, és készen kell állnia a ringatásra:

Töltse le és telepítse a Node.js -t, amelyet függőségeink kezelésére használunk.
Vagy töltse le a Bootstrap forrásait, vagy forgassa el a Bootstrap tárházát .
Keresse meg a gyökérkönyvtárat /bootstrap, és futtassa a package.json fájlbannpm install felsorolt helyi függőségek telepítéséhez .

Ha elkészült, futtathatja a különböző parancsokat a parancssorból.

npm szkriptek használata

A package.jsonunk számos feladatot tartalmaz a projekt fejlesztéséhez. Futtassa npm runaz összes npm szkriptet a terminálon. Az elsődleges feladatok közé tartozik:

Feladat	Leírás
`npm start`	Lefordítja a CSS-t és a JavaScriptet, összeállítja a dokumentációt, és elindít egy helyi szervert.
`npm run dist`	Létrehozza a `dist/`könyvtárat a lefordított fájlokkal. Sass , Autoprefixer és terser szükséges .
`npm test`	A futás után helyben futtatja a teszteket`npm run dist`
`npm run docs-serve`	Helyben készíti és futtatja a dokumentációt.

Kezdő projektünkkel kezdje el a Bootstrap használatát az npm-en keresztül! Nyissa meg a twbs/bootstrap-npm-starter sablontárat, és nézze meg, hogyan hozhatja létre és testreszabhatja a Bootstrap-ot saját npm-projektjében. Tartalmazza a Sass fordítót, az Autoprefixert, a Stylelint, a PurgeCSS és a Bootstrap ikonokat.

Sass

A Bootstrap a Dart Sass -t használja Sass-forrásfájljaink CSS-fájlokká való fordításához (amely benne van az összeállítási folyamatunkban), és azt javasoljuk, hogy tegye meg ugyanezt, ha a Sass-t saját eszközfolyamatával fordítja. Korábban a Node Sass-t használtuk a Bootstrap v4-hez, de a LibSass és az arra épülő csomagok, köztük a Node Sass, már elavultak .

A Dart Sass 10-es kerekítési pontosságot használ, és hatékonysági okokból nem teszi lehetővé ennek az értéknek a beállítását. Nem csökkentjük ezt a pontosságot a generált CSS további feldolgozása során, például a kicsinyítés során, de ha ezt választja, javasoljuk, hogy tartson legalább 6-os pontosságot, hogy elkerülje a böngésző kerekítésével kapcsolatos problémákat.

Autoprefixer

A Bootstrap Autoprefixer -t használ (amely benne van az összeállítási folyamatunkban), hogy automatikusan hozzáadja a szállítói előtagokat egyes CSS-tulajdonságokhoz az összeállítás során. Ezzel időt és kódot takaríthatunk meg, mivel lehetővé teszi számunkra, hogy a CSS kulcsfontosságú részeit egyszer írjuk meg, miközben szükségtelenné válik a 3. verzióban található gyártói mixin.

Az Autoprefixer által támogatott böngészők listáját külön fájlban kezeljük a GitHub-tárhelyünkön belül. A részletekért lásd a .browserslistrc fájlt .

RTLCSS

A Bootstrap az RTLCSS segítségével dolgozza fel a lefordított CSS-t és konvertálja azokat RTL-re – alapvetően a vízszintes irányt érzékelő tulajdonságokat (pl. padding-left) az ellenkezőjére cserélve. Lehetővé teszi, hogy csak egyszer írjuk meg a CSS-ünket, és kisebb módosításokat hajtsunk végre az RTLCSS vezérlő- és értékdirektívák használatával .

Helyi dokumentáció

Dokumentációnk helyi futtatásához a Hugo használata szükséges, amely a hugo-bin npm csomagon keresztül települ. A Hugo egy kirívóan gyors és meglehetősen bővíthető statikus webhelygenerátor, amely a következőket kínálja számunkra: alapvető tartalmak, Markdown-alapú fájlok, sablonok és egyebek. Így kezdheti el:

Futtassa végig a fenti szerszámbeállítást az összes függőség telepítéséhez.
A gyökérkönyvtárból /bootstrapfuttassa npm run docs-servea parancssorban.
Nyissa http://localhost:9001/meg a böngészőben, és íme.

Tudjon meg többet a Hugo használatáról, ha elolvassa a dokumentációját .

Hibaelhárítás

Ha problémákba ütközik a függőségek telepítése során, távolítsa el az összes korábbi függőségi verziót (globális és helyi). Ezután futtassa újra npm install.