in English

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.

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:

  1. Töltse le és telepítse a Node.js fájlt , amelyet függőségeink kezelésére használunk.
  2. Vagy töltse le a Bootstrap forrásait, vagy forgassa el a Bootstrap tárolóját .
  3. 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.json fájlunk a következő parancsokat és feladatokat tartalmazza:

Feladat Leírás
npm run dist npm run distlétrehozza a /dist/könyvtárat a lefordított fájlokkal. Sass , Autoprefixer és terser - t használ .
npm test A futás után helyben futtatja a teszteketnpm run dist
npm run docs-serve Helyben készíti és futtatja a dokumentációt.

Futtassa npm runaz összes npm szkript megtekintéséhez.

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 v4 a Node Sass -t használja Sass-forrásfájljaink CSS-fájlokká való fordításához (amelyet az összeállítási folyamatunk tartalmaz). Annak érdekében, hogy ugyanazt a generált CSS-t kapja, amikor a Sass-t saját eszközfolyamattal fordítja, olyan Sass-fordítót kell használnia, amely legalább a Node Sass szolgáltatásait támogatja. Ezt azért fontos megjegyezni, mert 2020. október 26-tól a LibSass és az arra épülő csomagok – köztük a Node Sass – elavultak .

Ha újabb Sass-szolgáltatásokra vagy újabb CSS-szabványokkal való kompatibilitásra van szüksége, a Dart Sass mostantól a Sass elsődleges megvalósítása, és támogatja a Node Sass-szal teljes mértékben kompatibilis JavaScript API-t (a Dart Sass GitHub-oldalán felsorolt ​​néhány kivétellel ).

A Sass kerekítési pontosságát 6-ra növeljük (alapértelmezés szerint 5 a Node Sass-ban), hogy megelőzzük a böngésző kerekítésével kapcsolatos problémákat. Ha a Dart Sasst használod, ezt nem kell módosítanod, mivel ez a fordító 10-es kerekítési pontosságot használ, és hatékonysági okokból nem teszi lehetővé a beállítást.

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 egyetlen alkalommal írjuk meg, miközben szükségtelenné válik a 3-as 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 .

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:

  1. Futtassa végig a fenti szerszámbeállítást az összes függőség telepítéséhez.
  2. A gyökérkönyvtárból /bootstrapfuttassa npm run docs-servea parancssorban.
  3. 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.